PHP背景颜色半透明,html通过css来设置半透明背景

Html/Css标签透明度效果的实现,在html中,实现半透明背景,在HTML p+Css编程中,为了实现版透明,通常有3中做法。

方法一:

第一种是HTML5的透明,在H5中支持透明背景颜色,但遗憾的是,H5中的办透明背景颜色只支持 rgba的写法,不支持16进制的写法

如:background-color:rgba(0,152,50,0.7);// -->70%的不透明度 background-color:transparent;支持完全透明

d5281d35f5611c650b3968d8ff269d54.png

在传统浏览器中,IE浏览器的独特性也是某些透明度设置的不确定性因素

一般来说,firefox和webkit,khtml阵营中实现透明的方式非常简单,也包括IE9+及大于IE9的浏览器使用上述HTML5设置透明。

方法二:

第二种是使用半透明粒子图片,图案或者渐变半透明PNG图片,这种方法是兼容性兼容性的,除了IE6需要使用插件来修改PNG不透明的bug外,

支持性非常好,设置可以重复,还可以定位,在H5中也可以设置大小,不过在网页中追求极致的话加载图片越少越好。

(粒子:透明度匀称的图片裁剪至5px * 5px以下,这样加载速度要快的多)background:url(path/my_png_bg.png) no-repeat center center scroll;

896b3e2fa1c97367b93384570b2eee3a.png

方法三:

第三种方式是使用透明度+背景颜色或者背景图片来实现。background-color:rgb(0,152,50);opacity:0.7;background:url(path/my_bg.jpg) no-repeat center center scroll;opacity:0.7;

那么,问题来了,IE6-IE8完全不支持 opacity,所以还得考虑一下 IE的滤镜

IE中有很多滤镜,其中使用alpha通道来设置不透明度filter:(opactity=70)

因此上述方案改造如下

background-color:rgb(0,152,50);opacity:0.7;filter:alpha(opacity=70);background:url(path/my_bg.jpg) no-repeat center center scroll;opacity:0.7;filter:alpha(opacity=70);

7ad5720e2101d818dd4087f79fb8bd3d.png

44dd4d524d9b54ca914c3ce34046c717.png

注意:opacity或者alpha的值强调的是“不”透明度

推荐使用第三种方案

Opacity

本文原创发布php中文网,转载请注明出处,感谢您的尊重!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值