如今,您不必再担心透明度在跨浏览器环境中难以实现。您只需使用 opacity 属性,如下所示:
.thing {
opacity: 0.5;
}
0 表示完全透明(将完全不可见,类似于 visibility: hidden),而 1 表示完全不透明(默认值)。介于两者之间的任何值表示部分透明。
出于历史原因,我们过去是这样做的:
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
实际上错过了 IE8 透明度大事件。感谢您包含这一点!
是的。我也不知道那个。我唯一对这段代码片段感到不满的是它不是有效的 CSS。
尽管如此,我还是要使用它。
添加 display: inline-block 将解决这个问题。xD
切·格瓦拉杀手!
@Amr SubZero
我专门创建了一个帐户来感谢您,这解决了 IE 中元素未将透明度传递给其子元素的问题。
有用 :) 谢谢!
注意 - 顺序
.yourselector {
background:#000;
opacity: .75; /* 标准:ff 大于 1.5,opera,safari */
-ms-filter: “alpha(opacity=75)”; /* ie 8 */
filter: alpha(opacity=75); /* ie 小于 7 */
-khtml-opacity: .75; /* safari 1.x */
-moz-opacity: .75; /* ff 小于 1.5,netscape */
}
如果您希望透明度也适用于 IE8 中模拟 IE7 模式的情况,顺序应为:
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // 首先
filter: alpha(opacity=50); // 其次
如果您不使用此顺序,IE8 模拟 IE7 将不会应用透明度,尽管 IE8 和 IE7 原生版本可以应用透明度。
那层内部的文字怎么保持正常?
是的!我也想知道该怎么做……
如果您将父容器设置为低于 100% 的透明度,则其所有子元素也将低于 100%,这并非因为它是级联的,而是因为父元素被调暗了。如果父元素被调暗到 75%,即使您为子元素设置 100% 的透明度,它也只会是 75% 的 100%,即 75%。
我通常的做法是为父元素使用半透明的 PNG 作为背景图像,这样子元素就可以拥有完全的透明度。
inb4 IE6 无法渲染 24 位 PNG …… eff IE6,我已经厌倦了讨好 IE6 并启用所有仍然使用它的人。使用半透明 PNG 不会破坏网站,但它肯定会影响美观,这也是人们升级的更多理由。
使用 rgba
您需要阻止样式级联…… 您需要将文本包装在一个透明度为 100 的元素中。
我错了:https://css-tricks.org.cn/non-transparent-elements-inside-transparent-elements/
我发现我在网站上使用的这段代码片段比其他任何代码片段都多。谢谢!=D
这对 IE9 来说没问题吗?
ie9 支持“opacity: 0.5;”就像 chrome 和 firefox 一样。
感谢您更新的代码^^
很棒的“提交评论表单”。恭喜,这是我多年来在互联网世界冲浪中发现的最好的表单……
但我有一个问题……
为什么你们所有“网站管理员”都要询问电子邮件,哼?如果我想要答复,我会提供我的电子邮件,或者更确切地说,我会联系您。如果不是,我就会简单地撒谎!并使用像这样的电子邮件:[email protected]
取消这些“必填字段”。我讨厌这种大规模标准化和全球化,它太媚俗,太可预测,这是一个虚假的句子,用来唤起一个神秘的概念。
网站管理员询问电子邮件是为了帮助识别垃圾邮件,以及唯一标识用户。如果您不想输入您的电子邮件,那么就相信您的帖子会被删除为垃圾邮件,而且您确实无法贡献,因为您只是一些“asdf”s。
当我读到“好浏览器”这句话时,我笑了。
那是因为你是个白痴。
信息很好,非常有用。谢谢……
@asdasdasd:你应该在 IE8 中查看这个很棒的提交表单。
我在 PNG 上尝试过,但它周围出现了一条黑条。
谢谢,这太有帮助了!
正如克里斯在这里写的那样:https://css-tricks.org.cn/64-css-transparency-settings-for-all-broswers/
使用以下 anno 2011
我的所有文本都不可见,因为它应该完全透明地与半透明背景相对应……但我无法在 IE 7/8 中使用透明度。它嵌套在一个 P 中,仅此而已。
我尝试过 zoom:1 和 Hilbrand 的透明度修复,但仍然无法正常使用。我是否做错了什么,或者有人知道修复它的代码片段吗?
不得不嘲笑对“好浏览器”的引用 - 我很高兴类似的事情不再需要写成一篇长文章,因为所有答案都在你的代码片段中,这太棒了。:)
谢谢,这为我节省了几个小时!
好浏览器,你说的对!
“它太媚俗,太可预测,这是一个虚假的句子,用来唤起一个神秘的概念。” 你应该成为一名作家!哈哈。
“好浏览器”这个评论让我笑了!
感谢您的帖子,我在设计时经常使用这段代码片段 :)
只想说声感谢,我一直在参考它!
这对我来说非常有用,除了 IE6 和 IE7。事实证明,你需要将“A”和“O”大写,如下所示
filter: Alpha(Opacity=50);
干杯!
我的错!我的上一篇文章错了。使用小写字母在 IE6 和 IE7 中工作正常
filter: alpha(opacity=50);
再次感谢!
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
这在 IE8 中不起作用
我该怎么做才能在 IE8 和 7 中工作
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
这在 IE8 中不起作用
我该怎么做才能在 IE8 和 7 中工作
嗨,
我使用 css pie 来实现圆角,但问题是,对于透明度,我使用了上面的代码,但我看不到透明度。
如果我删除 csspie 行为,我可以在 IE8 中看到透明度。
所以包含 csspie 有问题吗?我没有找到任何解决方案,请帮忙。
谢谢
你是否像 WordPress 文章一样创建了所有这些片段作为 WordPress 的动态页面?
不.. 事实上我在我的 html 页面和 css 中使用了这些片段。
嗨
每次我需要设计 css 样式时,我都会来这里。非常感谢克里斯
-webkit-opacity 怎么样?是用于谷歌浏览器吗?
对此有任何更新吗?
使用 opacity 属性和 images:hover 时存在问题。出于奇怪的原因,这会导致图像“跳动”一个像素。但是以下修复有效(我不知道为什么)
box-shadow: #000 0em 0em 0em;
更多信息:http://stackoverflow.com/questions/9581071/jquery-fading-images-with-html-resize-makes-them-move-sometimes
干得好,先生。
对我有很大帮助,尤其是在 IE 问题方面
找到了更好的方法
background-color: transparent;
background-color: rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000)”;
当 ms-filter 不起作用时,如何在 IE8 中测量背景大小
抱歉,发错了帖子,那是针对透明背景的,但可以正常工作,而无需隔离 ie7 8 文件
不幸的是,我在使用透明度时在 IE7 中遇到了按钮周围的黑边框。
有没有人对此有解决方案?
谢谢,完美:D
克里斯,非常感谢你。这对我帮助很大:)
对于 IE7,你真的需要确保它也有一些这些…
position: relative;
z-index: 99;
zoom: 1;
overflow: visible;
谢谢。这很有用。
真的很有帮助
嗯。这似乎只在我删除每个过滤器周围的引号时才有效。
嗨,IE9 兼容模式下的透明度不起作用。是否有针对这种情况的特定代码…
为什么要在 IE9 中使用兼容模式?普通用户不会使用它。如果你想要 IE8 兼容性,请在真正的 IE8 上测试。
仍然在嘲笑评论 /* 好浏览器 */
…但那是事实:)
此代码在 IE8 上不起作用。有谁知道完美的解决方案吗?谢谢
https://mdn.org.cn/en-US/docs/Web/CSS/opacity
“Firefox 3.5 及更高版本不支持 -moz-opacity”
找到 css 技巧的最佳地点。IE8?!他们在想什么,微软,说真的?
感谢你!真爱仍然支持 IE8!;)
需要一个针对 ie8 的解决方案:|
请更新这个页面或把它从互联网上移除好吗?这些东西太古老了。
我会更新它,使其更清晰,并建议最现代、最简单的方法。
嗨,克里斯,你在 IE 5-7 下面放了
filter: alpha(opacity=50);
,但它在 IE8 中运行得很好,不需要使用 DirectX 的那个复杂的代码行... 对于 IE8。我是不是漏掉了什么?确实我在 IE11 上模拟 IE8 测试了这一点。
谢谢
停止支持遗留浏览器。
当有人尝试通过其中一个浏览器连接到网站时,创建一个巨大的通知窗口,通知他他正在使用一个恐龙时代的网页浏览器,他应该更新。即使微软也试图摆脱 IE!
IE 8 不支持透明度真是太可笑了,甚至 filter:alpha(opacity=56) 也不支持。为什么必须使用 -ms-filter:”progid:DXImageTransform…bla.bla.bla”?
西尔维乌是对的... filter: alpha(opacity=50); 在 IE8 上运行良好
嗨,
透明度在 IE11 和 Chrome 中运行良好,但在 IE11 - 企业模式下失败。如果有谁尝试过在企业模式下对 IE 进行透明度处理,并且遇到了背景完全变成灰色(在其他浏览器中运行良好)的问题,请告知。
使用了 {opacity: .3; filter: Alpha(Opacity=30)}。请分享一个解决方案。
什么用途
/* Safari 1.x */
-khtml-opacity: 0.5;
?
谢谢
嗨!如果你想让 Safari 1 版本支持透明度,这是所需的词缀。Safari 直到后来才支持该功能,因此要在该版本上工作需要在该属性上使用该词缀。
好的,谢谢你,杰夫·格雷厄姆