Translucent effect of pictures and text. Mouse over to make opaque_page background

The DIV is in a semi-bright state, so that the background can be seen and the text can be highlighted. When the mouse is placed on the text, the DIV layer is completely opaque and the text is displayed clearly. Generally, this effect must be combined with JavaScript, so it is compatible. Sex would be better.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>The translucent effect of combining pictures and text, it becomes opaque when the mouse is moved over</title> <style type="text/css"> .box{ width:600px; height:600px; padding:20px;} *{ margin:0; padding:0;} body{ background:url(http://files.jb51.net/demoimg/200910/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> <div class="box"> <div class="in_box" id="in_box"> <p class="sub_con"> Script House (http://www.jb51.net) provides various programming source codes, book tutorials, JavaScript/CSS special effects codes, etc. to build a high-quality learning website. </p> </div> </div>