首页 > 技术文章 > css改变背景透明度.html

miaoxiaojiao 2017-08-30 16:41 原文

 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=utf-8" />
 5 <title>无标题文档</title>
 6 <style>
 7 
 8 div {
 9     width: 300px;
10     height: 300px;
11     border: 1px solid red;
12     background: #000;
13     color: #FFF;
14     filter: alpha(opacity=50);
15     opacity: 0.5;
16 }
17 
18 </style>
19 </head>
20 
21 <body>
22 <div>abcdefg</div>
23 </body>
24 
25 
26 <!--透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码:
27 .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}
28 上面的几个属性分别是:
29 opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持firefox, Safari和 Opera.
30 filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1.
31 -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
32 -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。-->
33 
34 
35 </html>

 

推荐阅读