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中半透明样式怎么处理就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!


标题名称:CSS中半透明样式怎么处理
转载注明:http://azwzsj.com/article/jeshoe.html