The DIV is a transparent state, so you can see the background can also foil text, when the mouse placed on the text, the div layer is completely opaque, text clear display, generally this effect is to cooperate with JavaScript, so compatibility will be better.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> picture with text translucent effect, mouse over opacity </title> <style type=" Text/css ">. box{width : 600px; height:600px; padding:20px;} *{margin:0; padding:0;} body{Background:url (yun_qi_img/wall.gif) no-repeat; width:300px; height:235px;} . In_box{background: #fff; width:293px Background:rgba (255,255,255,0.4); Filter:alpha (opacity=40); . box. sub_con{position:relative; color: #00F; width:100%;} . Ff{background: #fff; width:293px Background:rgba (255,255,255,1); Filter:alpha (opacity=100); </style> </pead> <body> <div class= "box" > <div class= "in_box" id= "In_box" > <p class= "Sub_con" > Yun-Habitat Community (http://www.jb51.net) to provide all kinds of programming source code, book tutorials, javascript/css special effects codes, do have a quality learning-oriented web site. </p> </div> ≪/div> <script type= "Text/javascript" > var hh=document.getelementbyid (' In_box '); var BB; Hh.onmouseover=function () {bb=this.classname; This.classname= ' FF '; } hh.onmouseout=function () {this.classname=this.classname.replace (' ff ', BB); } </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
