css设置透明（各浏览器兼容）

原创 已于 2022-05-09 09:02:35 修改 · 658 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #css3 #前端
于 2022-05-07 14:30:35 首次发布
本文解析CSS中如何设置元素透明度，包括filter、-moz-opacity、-khtml-opacity和opacity属性的使用，特别强调了透明度对子元素的影响及在IE8及以上浏览器的兼容性。

css代码如下：

.demo{
	filter:alpha(opacity=50);  
	-moz-opacity:0.5;  
	-khtml-opacity: 0.5;  
	opacity: 0.5;
	}

注1：设置透明度后该元素及其子元素都透明化，子元素透明无法去掉，必须与父元素一致。

注2：IE8及以上均可以使用。

CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
热门推荐
freshlover的专栏
12-05 14万+
CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别。 首
CSS透明度（兼容所有浏览器）
weixin_34345560的博客
04-21 158
Css代码 ：.transparent_class{ filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; } //整块透明//背景透明，内容不透明.transparent_class...
CSS中的浏览器兼容性问题（一）—— 透明
前端历险记的博客
03-21 258
CSS中的浏览器兼容性问题（一）—— 透明
CSS实现背景透明度调节，兼容所有浏览器
Visant Blog
05-09 1936
重点内容入口： IE6和部分IE7内核的浏览器会读懂rgba IE专属滤镜 filter:Alpha的兼容处理 背景透明，文字不透明全兼容方案测试浏览器： VirtIE6、虚拟机下XP的IE6、纯正IE8、纯正IE8下QQ浏览器、WIN7下的IE 9.0.32 、WIN8下的IE 10.0.21、chrome 38.0 、QQ浏览器8.0-IE10.0.5、safari 5.1.7、oper
【总结】CSS透明度大汇总
weixin_30716725的博客
03-31 209
　　近年来，CSS不透明算得上是一种相当流行的技术，但在跨浏览器支持上，对于开发者来说，可以说是一件令人头疼的事情。目前还没有一个通用方法，以确保透明度设置可以在目前使用的所有浏览器上有效。 　　这篇汇总主要是提供一些CSS不透明的详细介绍，代码示例和解释，以实现这项有用的CSS技术在您的项目中兼容所有浏览器。 　　关于CSS 透明度，有一点需要注意的是，它虽然使用了很多年，但它...
css 透明度的设置兼容所有浏览器
HTML5_styy的博客
11-24 1560
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 说明： 1.opacity: 0.5; 是最重要的，兼容Firefox，Safari和Opera等大多数浏览器。还有少数浏览
css透明度的设置 （兼容所有浏览器）
Duke的博客
07-30 916
CSS透明度的设置（兼容所有浏览器） .transparent_class { background:rgba(255, 0, 0, 0.5); /* IE 8 不兼容 */ filter:alpha(opacity=50); /*IE滤镜，透明度50%*/ -moz-opacity:0.5; /...
兼容性所有浏览器的透明CSS设置
weixin_30786617的博客
08-07 79
兼容所有浏览器的透明CSS设置： .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } UPDATE: I wanted to pull this post ...
CSS透明属性详解
小帅的专栏
10-20 2214
兼容主流浏览器的CSS透明代码:.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -kHTML-opacity: 0.5; opacity: 0.5;} 上面的几个属性分别是:opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 O
css中如何使颜色透明度
haojiao730的博客
02-09 845
css中使颜色透明度的方法：首先创建一个HTML示例文件；然后创建一个div；最后通过“opacity:0.5;”属性设置元素背景的透明度即可。 本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。 推荐：《css视频教程》 CSS颜色透明度 一、设置元素背景透明度 opacity可以用来设置元素背景的透明度；它需要0~1之间的值 0表示完全透明（opacity:0）； 1表示完全不透明（opacity:1）； 0.5表示半透明（opacity:0.5）； 代码演示： 1 2 3 4
html的opacity标签,CSS属性参考 | opacity
weixin_42552315的博客
06-18 4976
CSS opacity 属性用于指定一个元素的透明度。换句话来说，opacity属性用于控制元素背后的背景的可见程度。opacity属性使用值来作为元素透明度的级别。数值的范围在0-1之间。透明度值为1是元素默认的透明度级别，它表示元素完全不透明。透明度为0表示元素完全透明。当一个元素的透明度数值越接近0时，它后面的背景就看得越清楚。当opacity属性应用在某个元素上时，是把这个元素(包括它的内...
CSS如何设置透明
wzh1593185的博客
06-29 1万+
前端必看css设置透明度的几种常用的方法
常见的css兼容问题
m0_57391092的博客
10-05 2509
常见的css兼容问题
css设置透明的几种办法
最新发布
weixin_43063398的博客
12-08 6967
在CSS中，有几种方法可以设置元素的透明度。
css两种设置透明度的方法
weixin_64202598的博客
11-18 3917
【代码】两种设置透明度的方法。
Css如何设置透明度
weixin_54048131的博客
08-04 6772
value ：指定不透明度，从0.0（完全透明）到1.0（完全不透明）。opacity属性具有继承性，会使容器中的所有元素都具有透明度；R,G,B颜色的意思，A代表透明度。opacity属性设置背景透明度。
CSS透明度兼容写法
删库跑路
02-02 2268
filter: Alpha(opacity=10); /* IE */ -moz-opacity:0.1; /* FF 主要是为了兼容老版本的FF */ opacity:0.1; /* FF */
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值