- CSS implementation Div Transparent, and the text displayed in the above is not transparent, but also can see the content shown in the picture below, div Transparent is actually quite simple, mainly for background definition opacity property, generally this is the maximum value is 1, the value of the closer to 1, the more opaque, that is, the smaller the more transparent, Colors can be customized. This allows the text on the image to be more clear, in some of the image effects we have to meet this effect.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<title>css background transparent text opaque </ Title>
<style type= "Text/css";
. item{width:500px;font:17px ' Microsoft Jas Black '; height:300px;margin:0 auto; Position:relative;}
. hi,h3{position:absolute;left:0;bottom:0;width:100%;height:36px;}
H3{line-height:30px;color: #fff; margin:0;z-index:1;} /* Add Z-index value, the text will not be transparent */
. hi{background:blue;opacity:0.3;} /* Background transparent */
</style>
<body>
<div Class= "Item" >
<p><a href= "http://www.codefans.net/jscss/" ></A></P>
</div>
</body>
The
CSS implements Div transparency, and the text displayed above is opaque, but you can also see the contents of the picture displayed below