css 透明 文字不透明

用两个DIV 作为容器实现

Firefox chrome IE6+

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 5 <title>让div透明 而里面的文字不透明的写法</title>

 6 <style type="text/css">

 7 .opacity{

 8     width:244px;

 9     height:183px;

10     background:#5b5858;

11     filter:alpha(opacity=50); /*支持IE */

12     -moz-opacity:0.5; /*支持FF */

13     opacity:0.5;

14 }

15 .text{

16     position:relative;

17     height:183px;

18     margin-top:-183px;

19     color:#FFFFFF;

20 }

21 </style>

22 </head>

23 <body>

24     <div class="opacity">透明的层透明的层透明的层透明的层透明的层透明的层透明的层透明的层透明的层透明的层透明的层</div>

25     <div class="text">这里是文字,显示的效果是透明的</div>

26 </body>

27 </html>

 

你可能感兴趣的:(css)