使用CSS设置网页图片透明度
精贴
置顶
1372
0
在网页制作的过程中,有时会碰到需要设置图片的透明度.这个虽然不是很常用.但遇到这问题会让人不知从何下手,本文就来说下使用CSS如何制作网页透明图片.
关于CSS Alpha透明的相关知识。先请看如下代码：
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/
简单解释，IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-opacity，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数（alpha(opacity)）使用大于0小于100的数值，其实也是百分比）。
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/
简单解释，IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-opacity，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数（alpha(opacity)）使用大于0小于100的数值，其实也是百分比）。
从上面的代码中你没有看到Opera。没错，Opera还未支持标准的opacity，也没有其私有的可支持Alpha透明的属性。
但是，我们知道，Opera是支持Alpha透明的PNG图片的（当然Moz Family也支持）。所以我们可以使用背景图片来实现Alpha透明效果。
关键在于：
background:transparent url(alpha80.png) left top repeat!important;
background:#ccc;
filter:alpha(opacity=50);
既然Moz Family支持Alpha透明的PNG，所以我们没有必要使用其私有属性了。当然，你可以使用标准的opacity，但别同时使用Alpha透明图片和opacity，这样的话就成了两者的混合了。你可以把上面的例子下载过来，然后/*opacity:.5;*/的注释看看。
background:#ccc;
filter:alpha(opacity=50);
既然Moz Family支持Alpha透明的PNG，所以我们没有必要使用其私有属性了。当然，你可以使用标准的opacity，但别同时使用Alpha透明图片和opacity，这样的话就成了两者的混合了。你可以把上面的例子下载过来，然后/*opacity:.5;*/的注释看看。
今日天气
···
···
···
···
近一月回答榜 - TOP 12
wuxuxiao
钻石VIP
qwe2466985
超级会员
yu_rebecca
黄金会员
wuxiao2882
青铜会员
a448155162
普通会员
messi
普通会员
85xinxi
普通会员
fushang369
普通会员
wawa512com
普通会员
zhuangjunhua
普通会员
ucase
普通会员
xuchunyun
普通会员
博客标签
- 热门排行
- CSS cursor鼠标样式一览表 2012-06-25
- .NET后台写JS代码 2011-11-03
- 网站地址多出jdfwkey的问题解析及... 2010-08-25
- 数据库xxx的日志已满,请备份该数... 2013-07-19
- 百度、google、Yahoo网站地图制作... 2011-01-30
- <a>标签的伪类书写顺序问题... 2010-09-04
- 什么是长尾关键词？ 2010-09-24
- CEO名言 2010-08-31
- Mysql 主从数据库同步 2010-09-12
- 用ASP实现网页BBS 2010-11-01
- 博主推荐
- 本个人博客微信公众平台上线啦~~... 2013-10-13
- 饼哥网络互联上线啦~~要买域名空... 2013-09-20
- 网站title标题如何正确修改不会被... 2013-08-26
- 饼哥通讯录系统上线啦，欢迎大家... 2013-08-24
- ASP .NET MYSQL 的简单分页 并不... 2013-08-19
- 网站有弹窗广告这样的站点，百度... 2013-08-17
- 做淘宝SEO优化需要注意的8大问题 2013-08-17
- 淘宝网怎么做SEO优化 2013-08-17
- 站长们要学习的“苍井空精神” 2013-08-17
- 苹果公司今日发布了iOS 7第五个开... 2013-08-07
- 随便看看
- Bad Request 错误处理 2013-11-09
- JS弹出层代码 2010-09-13
- 电脑蓝屏故障解决方法 2011-01-27
- 网站被黑的10大原因 2010-10-15
- 修正IE6的bug的10个技巧 2010-08-31
- Dreamweaver快捷键大全 2010-09-09
- 对你的ASP程序作负载测试 2010-10-22
- url是否需要尽量静态化 2010-09-07
- Android_NetworkInfo以及判断手机... 2013-06-19
- 一句代码解决IE8兼容问题 2010-10-14
- RSS新闻
- 传媒新闻
- CSDN
- 八卦新闻
- 女性新闻
- 台湾新闻
- 互联网
- 军事-新浪博客
- IT-新浪博客
- 汽车新闻
- 游戏新闻
- 国际新闻
- 国内新闻
- 体育新闻
- 我的微博