3 replies [Last post]
wright67uk
wright67uk's picture
Offline
newbie
Last seen: 10 years 14 weeks ago
Timezone: GMT+1
Joined: 2010-11-21
Posts: 5
Points: 8

Ive been exploring the use of opacity within some of my designs.
Im frustrated by the fact that when I add opacity to a div, the background image within the div appears with a really thin (maybe 1px) black line around the edge of it.

my css;

  #mainoverlay {
	background-image:url(textbg.png);
	filter: alpha(opacity=50);
	opacity:0.5;
	color:#FFF;
	height: 200px;
	width: 600px;
	margin-left:160px;
}

Has anyone experienced this before?

ralph.m
ralph.m's picture
Offline
newbie
Last seen: 10 years 22 weeks ago
Timezone: GMT+10
Joined: 2010-11-21
Posts: 5
Points: 5

Using your code I couldn't

Using your code I couldn't recreate that. Are you sure it's not part of your image? Could you post the image so we could test it?

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 13 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

IE?

I've seen other people comment that IE sometimes adds a funky black border around filtered-images, but nothing for modern browsers. So, are you looking in IE?

Do you have any Javascript playing with the opacity, or only CSS?

Off-topic: Hi, ralph!

I'm no expert, but I fake one on teh Internets

wright67uk
wright67uk's picture
Offline
newbie
Last seen: 10 years 14 weeks ago
Timezone: GMT+1
Joined: 2010-11-21
Posts: 5
Points: 8

Im only using css, I havent

Im only using css, I havent used any scripting in my page. Im having this issue in IE8. Just tested this image in firefox 3.5 and chrome and they both seem fine!

However this has exposed a whole new can of worms.

Within the div with the low opacity background image, I have written text. This causes the opacity to effect my text aswell. To get around this I put my text within span brackets and set the opacity of the span to the preset 100. This works great in IE, however my text is faded in chrome and firefox!

I hope that there is a hack for firefox / chrome?
Do you think i should setup a new thread for discussion?