HTML设置半透明的背景,CSS设置半透明背景实例详解

本文详细介绍了如何使用CSS设置半透明背景,包括使用opacity、png透明度、rgba以及IE滤镜的渐变处理。通过示例代码展示了在不同浏览器中实现背景透明效果的兼容性方案。
摘要由CSDN通过智能技术生成

CSS设置半透明背景的方法有很多种,我这里根据自己的经验来与大学分享学习常用的CSS设置半透明背景设置方法总结。

无图片半透明背景css

如果,单纯地用背景色并结合opacity进行设置透明度,那么会出现子元素中的文字也同样出现透明的情况。

第二种情况:用png透明度合适的背景图,但这样的话,还得针对IE6进行PNG图片的灰色背景处理。

第三种方法:用rgba结合专用hack兼容常规浏览器。

Rgba进行背景色填充,并设置透明度,并不会导致子元素也继承其的透明度。例如:background:rgba(0,0,0,0.5);这句,就适合了支持CSS3.0的浏览器。但IE6、IE7、IE8,我们可以利用到IE滤镜的渐变进行设置,开始和结束的颜色都一样就行了,代码如下: 代码如下 复制代码

filter:progid:DXImageTransform.Microsoft.gradient(GradientType = 0,startColorstr = '#9A000000', endColorstr = '#9A000000' )9

(9A是透明度的16进制,例如上面,众所周知,透明度在IE中的值是1%~100%,之间,而在颜色中,透明度为100%的时候就是RGB的满值255,这时候,如果想设置0.6的透明度,就需要用255*0.6=153,这时候,这个154是十进制,我们还需要转换为16进制才能用,经过百度的转换器得出是9A,所以在开始和结束的颜色前面加上:9A)

具体参数含义如下:

pacity 透明度。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。

finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。

style   指定透明区域的形状特征:0 代表统一形状,1 代表线形,2 代表放射状,3 代表矩形

startx  渐变透明效果开始处的 X坐标。

starty  渐变透明效果开始处的 Y坐标。

finishx 渐变透明效果结束处的 X坐标。

finis

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值