网页不透明？

Posted 2023-03-06

【中文标题】网页不透明？

【英文标题】：Opacity in web pages?

【发布时间】：2010-10-25 22:21:48

【问题描述】：

我一直在网站上看到 60-80% 的不透明度。他们看起来真的很酷，但我不确定他们为什么要这样做。是 javascript，还是图像？ 如何更改表格的不透明度？

【参考方案1】：

如果您想要一个广泛的“跨浏览器”解决方案，除了 IE6（完全弃用），这将始终有效：

div 
    background-image: url('opacity.png');

“opacity.png”为 1px x 1px 透明 PNG24

它确实会向您的服务器生成一个额外的请求，但在大多数情况下，它完全可以负担​​得起。

【参考方案2】：

这两种方式都可以，我更喜欢 alpha 透明 png 文件作为背景。在桌子上做一个阿尔法使实际内容也半透明。请参阅 css 值的其他答案。

【参考方案3】：

您可以在 CSS 中执行此操作，但需要进行一些修改才能使其跨浏览器工作。

selector 
    filter: alpha(opacity=50); /* internet explorer */
    opacity: 0.5;           /* fx, safari, opera, chrome */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /*IE8*/

【讨论】：

对于标准模式下的 IE8，您必须编写：-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";

谢谢，不知道。当然，MS 让它变得更加困难。已将其添加到帖子中。

【参考方案4】：

您还可以创建一个 1x1 像素的 32 位 PNG 图像，例如具有您需要的不透明度的黑色正方形。然后在你的css中你可以做......

element

    background: url(/Images/Transparent.png) repeat;

这样您就可以避免所有不同的黑客攻击。您可能在 IE6 中遇到 Alpha 透明度问题，但也有一些方法可以解决这个问题

【参考方案5】：

IE 使用语法 filter:alpha(opacity=80)，较低的值使元素更透明，而 Mozilla 使用 -moz-opacity:0.8，较低的值对透明度有相同的影响。 CSS3 有效语法 opacity:0.8;

这就是你需要的三个 CSS 属性。

过滤器：alpha（不透明度=80）； //IE

不透明度：0.8； //CSS3

-moz-不透明度：0.8； //Mozilla

【参考方案6】：

不透明度可以在 CSS 中指定，但并非所有浏览器都支持（尤其是旧版 IE）