Geek Answers Handbook

Translucent background color but not text

How to show div contents with semi-background color but not with text value

Example:

<div style="height:25px; background-color: red;"> Content </div>

I want to display the background div as translucent and the text as usual during the onmouseover event.

How can i do this.

+4
source share
3 answers

Something like this work?

 <div class="wrapper" style="position:relative;"> <div class="transparentBG" style="position:absolute;top:0;left:0;">Text</div> <div class="overlay" style="position:absolute;top:0;left:0;">Text</div> </div>

You can set how styles change by having ": hover" versions for each class.

You will enjoy the support of multiple browsers.

Alternatively, you can use two images:

 <style> .transparentBGOnHover { background-image: url(../images/red.png); } .transparentBGOnHover:hover { background-image: url(../images/transparentRed.png); } </style> <div class="transparentBGOnHover"> Text </div>

IE6 cannot correctly handle transparent PNG without a DX filter.

You may also need to handle javascript handling for IE6 and IE7, as they do not support: hover over correctly (even though IE5.5 came up with it)

+1
source

Should this not work fine:

 <div style="height:25px; background-color: #99FF0000;"> Content </div>

Bobby

0
source

You cannot have opaque content in a translucent container. Content inherits transparency from the parent. Here is a solution that separates the content layer and the transparent layer. Everything is wrapped in a div that I am aiming for rules: hover.

This solution is tested only in FF3.5.4, note that IE 6 has problems with: hover over any other element, then <A> .

 <style type="text/css"> .wrapper { position: relative; } .background { background-color: red; width: 100px; height:25px; position: absolute; } .content { width: 100px; height: 25px; position: absolute; z-index: 2; color: #fff; } .wrapper:hover .background { opacity: 0.25; } .wrapper:hover .content { color: #000; } </style> <div class="wrapper"> <div class="content">Text</div> <div class="background"></div> </div>
0
source

More articles:


All Articles