div opacity and text
by Bug Logic
posted: February 2, 2010
Spent a bit of time trying to understand placing text within a div that had opacity. The problem was that the text itself would inherit the opacity, making it fairly useless.
Looked around on different sites for the answer to the problem, but never found anything that was correct. Found lots of answers, none of them satisfying.
In case you've arrived here looking for the actual answer, here it is.
The first div should have position:relative. No other styles need be applied to the first div, and it will remain open.
The second div will have the following CSS applied and will be closed:
position:absolute;
top: 0px (or whatever you need)
lleft: 0px (or whatever you need)
height: heightpx;
width: widthpx;
opacity: 0.8; (or whatever you need)
alpha(opacity=80);
background: color or url;
z-index:1;
The third div shall have the following CSS applied and will be closed after the text:
position:relative;
z-index:5;
color: color;
font-family: font-family;
padding: padding;
Finally, close the first div which remains open. You're done.
|
The above example (without the dotted background included) with the CSS written inline:
<div style="position: relative;">
<div style="position: absolute;
top: 0px;
left: 0px;
height:30px;
width: 218px;
opacity:0.8;
filter:alpha(opacity=80);
background:#281704;
z-index: 1;">
</div>
<div style="position: relative;
padding: 5px;
z-index:5;
color:#FFFFFF;
font-weight:bold;
font-family:'Times New Roman', georgia, times, serif;
font-size:15px;">Published in haste</div>
</div>
|
-----------
And that's it. Not sure why there was no reliable tutorial for this tehnique online. The internets are just full of things that are wrong. This isn't one of them.
You could of course apply the above CSS as either a class or as an id and it would work just fine too. Lot's of times, I prefer to write things inline because I only plan on using it once.
|
|
|
|
