CSS background transparency

C

Chris Harris

I am working on a page that has a background graphic which acts as a left
border. It is a stylized map. I am putting the menu over this using a UL
modified by CSS. I want the acheive the effect of having a colored menu with
rollover etc.. But I want the colors to be transparent so that the graphic
shows through.

I have acheived this by using a png graphic as the background color. I made
10px x 10px graphics and set the transparency. I load these as the
background for the menu items using "background: url(image.png) ", which
works fine.

But is there a way to define a transparent color using CSS alone?

Be nice if there was as it would save loading three graphics, even if they
are tiny little things of 140 bytes.

CJH
 
S

spaghetti

Chris Harris said:
But is there a way to define a transparent color using CSS alone?

Well, you can do 100% transparent as in: background-color:transparent; but I
think you mean translucent, which can only be achieved with alpha-channel
PNGs (which don't work in Internet Explorer anyway).

Additionally, use the background-attachment rule, you can take a faded
version of the background and use that as the background to make a nice
translucency effect.
 
C

Chris Harris

Well, you can do 100% transparent as in: background-color:transparent; but I
think you mean translucent, which can only be achieved with alpha-channel
PNGs (which don't work in Internet Explorer anyway).

Yes translucent is what I meant. And I have run into the PNG problem with IE
before it's a PITA.
Additionally, use the background-attachment rule, you can take a faded
version of the background and use that as the background to make a nice
translucency effect.
That sounds interesting, but I don't see what you are getting at. Presumably
a faded copy of the layer in the background of a div?

Can you give me a bit more detail or point me to a tutorial or reference of
some sort?

CJH
 
T

Toby A Inkster

Oh and what property is that good sir?

For example:

div.semitransparentblue {
color: white;
background-color: blue;
opacity: 0.75;
}

Although for now, Mozilla uses "-moz-opacity" instead, to avoid clashes in
case the rules for interpreting the value of opacity change between now
and when CSS 3 becomes an official recommendation.

So, in Mozilla:

div.semitransparentblue {
color: white;
background-color: blue;
-moz-opacity: 0.75;
}
 
N

Nicolai P. Zwar

Toby said:
For example:

div.semitransparentblue {
color: white;
background-color: blue;
opacity: 0.75;
}

Although for now, Mozilla uses "-moz-opacity" instead, to avoid clashes in
case the rules for interpreting the value of opacity change between now
and when CSS 3 becomes an official recommendation.

So, in Mozilla:

div.semitransparentblue {
color: white;
background-color: blue;
-moz-opacity: 0.75;
}

Do you know of any page that uses this feature already? I'd just like to
see a sample in action.
 
N

Nicolai P. Zwar

Toby said:
[-moz-opacity: 0.75;]

Do you know of any page that uses this feature already? I'd just like to
see a sample in action.


http://www.goddamn.co.uk/tobyink/styles/matrix/test.html

Although it doesn't seem to work in Moz 1.4 (should in 1.3.x). Moz 1.4
seems to only support the values "0" and "1" for this property???

Thank you for the example. Don't have Mozilla installed right now, but
it works fine in Netscape 7, though as already said, it's not yet
implemented in the latest versions of Opera or IE.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top