所有浏览器中的 CSS 透明度设置

透明度是那些具有奇怪历史的 CSS 属性之一，它需要大量不同的属性和值来确保跨浏览器兼容性，这可以追溯到很早以前。为了覆盖所有情况，您需要一堆 CSS 语句。幸运的是，它们不会相互干扰，因此每次您希望添加透明度时使用它们都不成问题，而且无需担心。它们如下，目前设置为 50% 透明度

.transparent {
	/* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
	width: 100%; 
		
	/* Theoretically for IE 8 & 9 (more valid) */	
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=50);
	
	/* Older than Firefox 0.9 */
	-moz-opacity:0.5;
	
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.5;
    
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.5;
}

更新于 2011 年 7 月 5 日。以下是我建议今天使用的，以更易于复制和粘贴的格式。

.transparent {
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: 0.5;
}

shane

# 2007 年 10 月 1 日

我尝试在链接中使用它，如下所示

a img:hover {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

不幸的是，它在 IE 中不起作用。您知道如何解决这个问题吗？

Daniel

评论永久链接# 2013 年 11 月 20 日

只需删除 ,, -khtml-opacity: 0.5; ”

Chris Coyier

# 2007 年 10 月 1 日

我认为您的问题是您将伪类 :hover 应用于 img 元素，而不是锚元素。我认为 IE 不支持 img 元素上的伪类。

您可以尝试为要具有此透明度悬停效果的锚点设置一个类（例如“transeffect”），然后将 CSS 更改为

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

anonymous

# 2007 年 10 月 11 日

不，不是那样，IE 幸运地支持 onhover 功能。

IE 6 和 7（可能还有更旧的版本——尚未检查）中存在一个错误，它阻止在元素上应用过滤器/不透明度，而这些元素在 CSS 中没有分配尺寸属性。

一种绕过该错误的方法是使用 JavaScript，然后它就会突然起作用。或者，只需在不与样式表冲突的情况下指定高度/宽度。

Chris Coyier

# 2007 年 10 月 11 日

啊，是的，那会起作用。您也许可以将宽度设置为 99.9%，以触发它，而不是在您不想设置固定宽度的情况下设置固定宽度。

Volkan GÃ¶rgÃ¼lÃ¼

# 2007 年 10 月 24 日

-moz-opacity:0.5;
-khtml-opacity: 0.5;

嗨 Chris，这两行是针对哪些浏览器的？

Chris Coyier

# 2007 年 10 月 24 日

-moz-opacity 选择器用于非常旧版本的 Mozilla 浏览器（Netscape）。这仍然有效，对于那些浏览器来说是必要的。

-khtml-opacity 选择器有点奇怪。我最初是在第一次使用 JonDesign 的 SmoothGallery 时获得它的，他在其中使用它来实现一些悬停透明度。我相信 -khtml 特别针对 Safari 1.x。

Jermayn Parker

# 2007 年 11 月 4 日

我使用
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”images/background.png”, sizingMethod=”scale”);

Brian Cook

# 2007 年 11 月 7 日

我很想看到这些样式在实际中的示例。我一直在想，让一个浮动 div 具有秘密信息的一半随机字母，而另一半字母在一个背景图像或其他东西中，这样您就需要向下滚动到完全正确的位置才能显示完整的信息，这可能很酷。不过，我自己对 CSS 还算不上精通，所以我无法想出如何实现它。

Gagan

# 2007 年 11 月 20 日

别忘了 DOCTYPE，这样才能让它在 IE7 中起作用；)

将此添加到您的 html 中，使其在 IE7 中起作用

# 2007 年 11 月 22 日

”
-khtml-opacity 选择器有点奇怪。我最初是在第一次使用 JonDesign 的 SmoothGallery 时获得它的，他在其中使用它来实现一些悬停透明度。我相信 -khtml 特别针对 Safari 1.x。

”

好吧，它并不专门针对 Safari，Linux 网页浏览器 Konqueror 也基于 khtml 工具包。

shane

# 2007 年 12 月 7 日

如果在块级元素上使用透明度，它会使内部文本也变得透明——有没有办法阻止这种情况发生？
我尝试将文本放在另一个 div 中并将其不透明度设置为 100，但这没有用，虽然从逻辑上讲，我认为它会起作用……

fioge

# 2007 年 12 月 12 日

您不能使用嵌套 div，因为它会继承父级的透明度级别，因为它的不透明度为 1.0。您应该在透明背景 div 上使用相同级别的前台 div，并绝对定位，且具有更高的 z-index。

Robert

# 2008 年 1 月 7 日

如果您将内部 div 的不透明度调高，并将背景颜色设置为透明，则可以使用嵌套 div 来获取半透明背景上的非透明文本。
test
看看我乱搞/学习/黑客的页面：http://www.aedsnet.com/ajaxmap.html
（点击地图标记以查看半透明框）。

至少，它在 IE7 和 FireFox 中有效

Robert

# 2008 年 1 月 7 日

好的，那个链接应该是 http://www.aedsnet.com/maps/ajaxmap.html

另外，我没有意识到我放入评论的 html 代码不会显示为文本，
所以这是我为“嵌套 div”使用的属性
style=”opacity:1; background: transparent;”
父级 div 有一个绿色背景，不透明度为 0.8

但肯定不会那么简单吧？

Chris Coyier

# 2008 年 1 月 8 日

@Robert：看起来您透明框中的文本也拾取了透明度。不幸的是，您无法“调高”子元素的不透明度。

我最近做了一个关于如何处理这个问题的提示：透明元素内的非透明元素。

Karim

# 2008 年 1 月 19 日

好吧……这确实很有名，但这不是有效的 CSS！也许使用透明 png 作为背景，再加上一个 js 库来处理 IE 案例会更好

derry3

# 2008 年 2 月 10 日

感谢 Chris Coyier 提供的信息和提示

oleg

# 2008 年 2 月 11 日

在 ie6 中，:hover 仅适用于链接。不过，这对您来说有效

a:hover img {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

dipak

# 2008 年 3 月 7 日

我有一个复选框，我希望该复选框的不透明度为 0.5。我在 Solaris 9 中使用 Mozilla 1.4 浏览器。但复选框没有显示“ -moz-opacity: 0.5;”。它不考虑 0 或 1 范围内的值。对于小于 1 的值，复选框没有显示。请告诉我解决方案，如果在 Solaris 9 中我可以使用其他属性。

复选框的当前样式类
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5; }

NekySerbia

# 2008 年 3 月 28 日

在我的 CSS 中，我有一些类似这样的代码

{
position: absolute;
height: 99%;
width: 25%;
cursor: pointer;
z-index:10;
filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;

但 SmoothGallery 在 Konqueror 和 Opera 中仍然看起来很糟糕。有什么方法可以解决这个问题吗？

zombie

# 2008 年 4 月 14 日

对于第一条评论，您应该像这样操作，它将在所有浏览器中有效 =>

a:hover img {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

SatanicElectro

评论永久链接# 2009 年 1 月 9 日

它在 IE6 上仍然不起作用。

Martin

# 2008 年 6 月 25 日

非常感谢您的提示。我正在图片上使用它来创建一个菜单 div，看起来真的很酷。

kristarella

# 2008 年 7 月 2 日

啊，当我遇到 CSS 问题时，我应该直接搜索您的档案，而不是 Google。我以为我对 CSS 很有了解，直到我读了您的博客……您太棒了！

感谢您的信息！

Dan Collins

# 2008 年 7 月 14 日

非常适合我的导航，节省了 CSS 精灵。
顺便说一句，设计不错！

Peter Yee

# 2008 年 8 月 15 日

嗨，我尝试了这些代码，在 Moz 和 Safari 上看起来很棒，但在 IE 中，每次悬停时都会出现延迟... 帮助！

Jay Vincent

# 2008 年 9 月 8 日

重要！

如果你想在 IE6 中使用不透明度，元素必须具有页面布局！你可以使用星号 HTML hack 并为元素设置 1px 的高度值来实现。因为 IE6 很愚蠢，所以高度会无论如何拉伸，而其他所有浏览器都会忽略它。

如果元素没有页面布局，你的不透明度样式将完全无效。

mbhayes

# 2008 年 9 月 8 日

好的，Chris ... 似乎出现了一些情况性的评论... 你是否有进一步的总结/结论（来解决所有这些松散的结尾）？或者我们应该只将你顶部代码视为一个好的通用起点，需要根据情况进行调整？

谢谢

Android

# 2008 年 11 月 4 日

很棒，这正是我需要的。非常感谢！

Stomata

# 2008 年 11 月 6 日

我刚刚尝试了你的方法，它运行良好。非常感谢！

Ze Thriller

# 2008 年 11 月 9 日

绝不直接对图像使用不透明度，而是将其设置在包含图像的 div 上，这将大大有助于创建干净且完全兼容的代码。

示例

<div style="filter: alpha(opacity=50);">
    <img src="a.png" alt="" width="100" height="100" />
</div>

如果你打算在 IE6 兼容的应用程序中使用 RGBA PNG 图像（具有透明层的 RGB，而不是索引），则需要使用 DirectX（需要 DX6 或更高版本）图像过滤器，但我根本不推荐它，除非是这种特殊情况。

示例

<span style="width: 100px; height: 100px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='a.png', sizingMethod='scale');">
    <img src="transparent.gif" width="1" height="1" alt="" style="display: block;" />
</span>

注意包含filter的span。内部图像是一个 1px x 1px 的透明填充（最小尺寸）。我注意到它比（不可分解的空间）更好，因为缩放文本（可能会破坏设计）以及无法设置 1px 大小的文本。

我找到了一个 JavaScript 代码，可以替换页面中的所有 PNG，我只是稍微修改了一下以处理 IE8。效果很好而且速度很快，虽然有一些限制
– 位于 display: none 元素内部的图像不会受到影响（IE 错误？）。可能在visibility: hidden和opacity=0中也是如此，自己测试一下。
– 图像在页面完全加载后才被更改。即使加载被用户（ESC 键等）中断，或者一些图像丢失或无法访问，脚本也会启动。
– 一旦修改，图像就不再是IMG标签，而是SPAN：如果使用特定于图像的代码，则无法通过脚本（JavaScript、Visual Basic 等）直接设置图像属性

错误（JavaScript 代码）

document.getElementById('myimage').src = 'b.png';

正确（JavaScript 代码，稍微大一些）

var img = document.getElementById('myimage');
if (img.nodeName.toLowerCase() == 'span') // <span> tag ?
{
    img.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'b.png\', sizingMethod=\'scale\')';
    // Change "image" dimensions if needed (example, optional):
    img.style.width = '100px'; // Don't forget the unit !
    img.style.height = '100px'; // Same here
}
else
{
    img.src = 'b.png'; // Standard method (much easier !)
}

如果多次使用，请尝试将其变成一个函数。

PNG 自动转换脚本（这是一个 XHTML 片段）

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<html>
<head>
<title>IE6 PNG loader test page</title>
<script type="text/javascript">
// <![CDATA[
function correctPNG()
{
    if ((navigator.appName == 'Microsoft Internet Explorer') && (navigator.appVersion.indexOf('MSIE 7') == -1) && (navigator.appVersion.indexOf('MSIE 8') == -1)) // IE < v7.x (+ Maxthon v1.x/v2.x , AOL , ...)
    {
        for(var i=0; i<document.images.length; i++)
        {
            var img = document.images[i]
            var imgName = img.src.toUpperCase()
            if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
            {
                var imgID = (img.id) ? "id='" + img.id + "' " : ""
                var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                var imgStyle = "display:inline-block;" + img.style.cssText
                if (img.align == "left") imgStyle = "float:left;" + imgStyle
                if (img.align == "right") imgStyle = "float:right;" + imgStyle
                if (img.parentElement.href) imgStyle = "cursor:pointer;" + imgStyle
                var strNewHTML = "<span " + imgID + imgClass + imgTitle
                + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
                + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                + "(src=\'" + img.src + "\', sizingMethod='scale');\"><\/span>"
                img.outerHTML = strNewHTML
                i = i-1
            }
        }
    }
}
// ]]>
</script>
</head>
<body onload="correctPNG();">
<!--- Main content -->
<div><img src="a.png" width="100" height="100" alt="" /></div>
</body>
</html>

我更喜欢使用 body onload 而不是它的 JavaScript 等效项（window.onload），它似乎运行得更好，稳定性也更高。

anastasia

# 2008 年 11 月 11 日

太棒了，感谢你的帮助。

Derren

# 2008 年 11 月 19 日

是否有方法对背景图像应用透明度？例如

示例

background: url(image.gif) repeat-x bottom left;
opacity: 0.4;
filter: alpha(opacity=40);

???

sam

# 2008 年 11 月 26 日

这在例如子导航中不起作用，当 png 在 a 标签后面时。只要你不将 a 标签定位为相对位置，它就不会起作用，而这并非总是可行。但是，从理论上讲，它应该可以工作。

sam

# 2008 年 11 月 26 日

在 IE6 中 :D。还有哪里...

sam

# 2008 年 11 月 26 日

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

我还有另一个与主题相关的问题。对元素（比如 div）使用“opacity”也会将不透明度应用于所有子元素。有什么解决办法吗？

干杯

Sil

# 2008 年 12 月 18 日

谢谢 :D

Micah

# 2008 年 12 月 21 日

嘿，这正是我一直在寻找的！这个不透明度垃圾很麻烦，但你在一篇简洁的文章中将所有内容都整合在一起。

sagbee

# 2009 年 1 月 6 日

现在，我正在处理我的网站 CSS 结构，并且在谷歌上搜索“如何在所有浏览器中使用 CSS 设置网站”

虽然这不是正确的解决方案，但我发现另一个错误仅仅是因为你的精彩教程 :)

感谢你的精彩教程！

Tom

# 2009 年 1 月 7 日

多么棒的脚本！我原以为无法在所有浏览器中实现透明度，但现在这个脚本改变了我的想法。谢谢。

David

# 2013 年 10 月 21 日

嗨，Sam，针对你的问题，试试这个

.myelement {
background: rgba(200, 54, 54, 0.5);
}

原因

opacity 样式会影响整个元素及其内部的所有内容。所以如果你不想让不透明度层叠，这是一个有用的解决方案

来源：http://stackoverflow.com/questions/5662178/opacity-of-divs-background-without-affecting-contained-element-in-ie-8

Michael

评论永久链接# 2013 年 10 月 21 日

David！你刚刚回答了一个五年前的问题 :)

parmacetti

# 2013 年 10 月 30 日

感谢你的回答，David - 我一直在寻找这个信息！

José Alberto

# 2014 年 5 月 14 日

我想强调关于 IE 的一个重要事实。在测试时我发现

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 也会为给定 DOM 元素的子元素设置不透明度。即，给定：将使 div 1 的 alpha 透明，并且 2 也将是 alpha 透明。

但是，如果你想模拟 rgba alpha，以便获得 0.5 透明的背景（也就是说，子元素将拥有自己的不透明度），你最好使用
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66ffffff,endColorstr=#66ffffff);

所以，可以说区别在于 -ms-filter 模仿 W3c opacity 属性，而 filter 模仿 rgba 颜色系统

此评论主题已关闭。如果您有重要信息要分享，请联系联系我们。