CSS中半透明样式怎么处理

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

创新互联致力于互联网品牌建设与网络营销，包括网站设计、成都网站制作、SEO优化、网络推广、整站优化营销策划推广、电子商务、移动互联网营销等。创新互联为不同类型的客户提供良好的互联网应用定制及解决方案，创新互联核心团队十载专注互联网开发，积累了丰富的网站经验，为广大企业客户提供一站式企业网站建设服务，在网站建设行业内树立了良好口碑。

一、 元素容器透明

 .div{
opacity: 0.5;   /* Firefox、Chorme、Opera等主流浏览器识别 */
filter:alpha(opacity=50);   /* IE6及以上IE浏览器识别 */
 }

说明：

1. opacity:* 取值0-1之间，由全透明向不透明递增，超过1之后默认不透明；

2. filter:alpha(opacity= *) 取值0-100之间，与上面同理；

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

二、元素背景透明

 .div{
     background: rgba(0,0,0,.5);    /* Firefox、Chorme、Opera等主流浏览器识别 */ 
     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#7f000000, endColorStr=#7f000000);   /* IE6及以上IE浏览器识别 */
 }

说明：

1. background:rgba(m n) 其中m是rgb颜色值，n是透明度，取值1-100之间，与上面第一条同理；

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

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

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

三、 图片透明

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

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

2. 在你的页面底部，body结束标签和html结束标签之间加载这段话：

3. 然后确保路径不要写错了。最后在DD_belatedPNG.fix("")里面加需要进行半透明处理的图片元素名或者class、ID名就可以了。

感谢各位的阅读！关于CSS中半透明样式怎么处理就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！