CSS中半透明样式怎么处理

  介绍

这篇文章给大家分享的是有关CSS中半透明样式怎么处理的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

<强>一、元素容器透明

.div {   透明度:0.5;/* Firefox, Chorme、歌剧等主流浏览器识别*/过滤器:α(不透明度=50);/* IE6及以IE上浏览器识别*/}

说明:

1。透明度:*取值0 - 1之间,由全透明向不透明递增,超过1之后默认不透明;

2。过滤器:α(不透明度=*)取值0 - 100之间,与上面同理;

3。用此属性后,元素容器内子元素全部继承,即全都会跟着半透明。

<强>二、元素背景透明

.div {   背景:rgba (0, 0, 0, 0。5);/* Firefox, Chorme、歌剧等主流浏览器识别*/过滤器:progid: DXImageTransform.Microsoft。梯度(startColorStr=# 7 f000000 endColorStr=# 7 f000000);/* IE6及以IE上浏览器识别*/}

说明:

1。背景:rgba (mn)其中m是rgb颜色值,n是透明度,取值1 - 100之间,与上面第一条同理;

2。startColorStr=m, endColor=n其中m和n由两部分组成,前2位是透明度,后6位面是十六色值,如7 f代表0.5的透明度,000000就是黑色了(不能简写成000);

3。第2点中m=n时是均匀透明,≠时是渐变透明、下面附一组前两个数值对应的透明度数据,格式如rgb透明值——IEfilter值:

0.1 - 19 - 33 | 0.3 - 4 c | 0.2 | 0.4 - 66 | 0.5 - 7 f - 99 | 0.6 | 0.7 b2 - c8 | 0.8 | 0.9——e5 |

<强>三、图片透明

说明:其实也就是为了针对IE6.IE7及以上浏览器都直接支持半透明图片。方法有很多,牛人总结了将近7,8种,我常用的是下面这种:

1。首先去网上下个png.js。

2。在你的页面底部,身体结束标签和html结束标签之间加载这段话:

& lt; !——(如果lte IE 6)比;   & lt;脚本src=https://www.yisu.com/zixun/" js/png.js ">