CSS table transparency make img opaque?

mortals · 2 Sep 2006 at 15:47

I've just started designing a new site and it all looks nice, has transparent tables etc using CSS. The only problem I've come across is all my images are also transparent

.

I managed to get it so the text isn't transparent.

I've tried lots of things for images like setting opacity to 100% in the img tag but it doesn't seem to make any difference :confused:

Code:

	background-color: #DBDDE9;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;

I tried

Code:

img {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

but it doesn't take any notice

I was thinking of trying the transparent png way but last time I did that it seemed a bit slow.

altho I did get it working with IE

Wonder if it's possible to do it using java or something

Fensta · 2 Sep 2006 at 15:55

have you tried putting it as filter: alpha(opacity= -100);
?

Just a thought

mortals · 2 Sep 2006 at 15:59

Fensta said:
have you tried putting it as filter: alpha(opacity= -100);
?

Just a thought

just gave that a go, doesn't seem to make any difference

I have:

filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;

set for the text and it seems to work ok.

Code:

div#leftcolumn {
	background-color: #DBDDE9;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}
div#leftcolumn * {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

there's what I have for transparent bg and opaque text

mortals · 2 Sep 2006 at 16:31

hmm I also just tried putting a style inside the img tag but it also ignores that

Augmented · 2 Sep 2006 at 17:27

It's simply the way opacity works at current. If you set opacity on a parent element, all child elements inherit the opacity value and it can't be increased.

mortals · 2 Sep 2006 at 17:40

Augmented said:
It's simply the way opacity works at current. If you set opacity on a parent element, all child elements inherit the opacity value and it can't be increased.

cool

That exlpains why it ignores the img setting.
I might try png transparency.

Just tried png and it looks all nice in dreamweaver but on firefox it doesn't seem to work

mortals · 3 Sep 2006 at 00:11

Cool I found a way around using css opacity.

Also got it working on IE

http://news.equk.co.uk/new.php

blade007 · 3 Sep 2006 at 00:38

hi. can I make a bad point? I don't like the background on the main text. The point of main text is to be read. When it is scrolled the background seems to be static ... so I end up looking at that.

RandomTom · 3 Sep 2006 at 00:38

upon opening the site ie gives me a warning saying some things might work, oh and also I can't read the text, tbh I think that the background image should be for the background, and use a easier on the eye content background.

mortals · 3 Sep 2006 at 01:35

Now I've looked at it I see what you mean about the text, will have to look at either changing the bg or changing the text.

The warning thing should only come up on IE, few bits don't seem to work on IE, altho I've not tried it on IE7.

Thx for feedback.

mortals · 3 Sep 2006 at 02:05

I've made it more opaque so the text is a bit easier to read, just need to sort out the sidebar on IE.