... this is see through text...
Test:
<!DOCTYPE html>
<html>
<head>
<title>Show opacity in use</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
* {
margin: 0;
border: 0;
padding: 0;
}
#topbanner {
position: absolute;
z-index: 0;
width: 600px;
top: 10px;
left: 100px;
}
#texthead {
position: absolute;
z-index: 3;
width: 600px;
top: 20px;
left: 120px;
color: #ffffff;
font: bold 18px/24px verdana, tahoma, sans-serif;
font-weight: bold;
}
#gofaster1 {
position: absolute;
z-index: 4;
width: 600px;
top: 28px;
left: 120px;
color: white;
}
#gofaster2 {
position: absolute;
z-index: 4;
width: 600px;
top: 30px;
left: 120px;
color: white;
}
#gofaster3 {
position: absolute;
z-index: 4;
width: 600px;
top: 32px;
left: 120px;
color: white;
}
#slogan {
position: absolute;
z-index: 3;
top: 35px;
left: 120px;
color: #ffffff;
font: bold 16px/40px verdana, tahoma, sans-serif;
}
#enclosetext {
position: absolute;
z-index: 3;
opacity: 0.45;
top: 15px;
left: 110px;
background: #000;
border-radius: 15px;
height: 60px;
width: 450px;
}
#othertext {
width: 600px;
top: 80px;
left: 100px;
position: absolute;
z-index: 6;
text-align: right;
color: #ffffff;
font: bold 30px/40px verdana, tahoma, sans-serif;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="topbanner">
<img src="hellfire1.png" alt="">
</div> <!-- #topbanner -->
<div id="enclosetext">
</div> <!-- #enclosetext -->
<div id="texthead">
The Hellfire Co.
</div> <!-- #texthead -->
<div id="slogan">
things that go bang in the night
</div> <!-- #slogan -->
<div id="gofaster1">
<img src="gofast1.png" alt="">
</div> <!-- #gofaster1 -->
<div id="gofaster2">
<img src="gofast1.png" alt="">
</div> <!-- #gofaster2 -->
<div id="gofaster3">
<img src="gofast1.png" alt="">
</div> <!-- #gofaster3 -->
<div id="othertext">
... this is see through text...
</div> <!-- #othertext -->
</body>
</html>
