As I was browsing the Yahoo Answers Computer Programming and Design section someone asked “How do I write solid text on a transparent background.”
Looking at the question I didn’t actually know how, so I thought I would solve that problem.
The biggest problem is that IE and Firefox both work differently. Yes I know that is the oldest problem in the book but it is quite annoying. Second When you make a div transparent any child (divs within divs inherit the properties of that div).
So you have to separate the divs, this posses a problem because you have to sort of stick the text div on top of the transparent div.
Code Below:
body {
background: #ffffff;
}
#image {
background-image: url('images/lol.jpg');
width: 300px;
height: 600px;
margin: 0 auto;
border: 1px #666666 solid;
position: relative;
z-index: 10;
}
.trans {
opacity:.50;filter:
alpha(opacity=50);
-moz-opacity: 0.50;
width: 300px;
height: 30px;
background: #000000;
float: none;
margin-top: -70px;
position: relative;
z-index: 50;
}
.text {
float: none;
display: block;
position: relative;
z-index: 90;
color: #ffffff;
width: 280px;
height: 50px;
padding: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
margin-top: 10px;
}
HTML:
<body>
<div id="image">
<div class="text">
Solid Text on a transparent Background
</div>
<div class="trans">
</div>
</div>
</body>
February 5th, 2008 at 10:05 am
thanks for webmaster,
good job. HellLabs Proxy Checker Pro
April 16th, 2008 at 6:29 am
hi