css改变背景透明度.html

最新推荐文章于 2025-07-22 00:16:16 发布

weixin_33852020

最新推荐文章于 2025-07-22 00:16:16 发布

阅读量82

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/miaoxiaojiao/p/7453869.html

本文介绍了一种兼容多种浏览器的CSS透明度设置方法，包括IE6在内的主流浏览器均可适用。通过使用opacity、filter等属性，可以轻松实现不同透明度的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 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>