带有rgba的CSS背景不透明度在IE 8中不起作用

Posted 2023-02-23

【中文标题】带有rgba的CSS背景不透明度在IE 8中不起作用

【英文标题】：CSS background opacity with rgba not working in IE 8

【发布时间】：2011-04-27 21:40:17

【问题描述】：

我正在使用这个 CSS 来设置 <div> 的背景不透明度：

background: rgba(255, 255, 255, 0.3);

它在 Firefox 中运行良好，但在 IE 8 中却不行。我该如何让它运行？

【参考方案1】：

要在 IE 中模拟 RGBA 和 HSLA 背景，可以使用渐变滤镜，具有相同的开始和结束颜色（alpha 通道是 HEX 值中的第一对）

background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */

【讨论】：

这是一种享受，但不幸的是，如果元素被动态隐藏并使用 jQuery 重新显示，它似乎停止工作......

rgba IE 过滤器非常有用，我能够解决 >ie7

滤镜的不透明度0.6是多少？

透明度的十六进制代码（第一对）可以在这里找到：(***.com/questions/15852122/hex-transparency-in-colors)

这些 IE 自定义十六进制值有一个 calculator！

【参考方案2】：

我相信这是最好的，因为在此页面上有一个工具可以帮助您生成 alpha 透明背景：

"Cross browser alpha transparent background CSS (rgba)" ^{_{(*现在链接到archive.org)}}

#div 
    background:rgb(255,0,0);
    background: transparent\9;
    background:rgba(255,0,0,0.3);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
    zoom: 1;

【讨论】：

请记住在过滤器中始终使用 RGBA 十六进制颜色：eq #004F80 is #ed004F80

【参考方案3】：

经过大量搜索，我发现以下解决方案适用于我的案例：

.opacity_30
    background:rgb(255,255,255); /* Fallback for web browsers that don't support neither RGBa nor filter */ 
    background: transparent\9; /* Backslash 9 hack to prevent IE 8 from falling into the fallback */
    background:rgba(255,255,255,0.3); /* RGBa declaration for modern browsers */
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* IE 8 suppoerted; Sometimes Hover issues may occur, then we can use transparent repeating background image :( */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* needed for IE 6-7 */
    zoom: 1; /* Hack needed for IE 6-8 */


/* To avoid IE more recent versions to apply opacity twice (once with rgba and once with filter), we need the following CSS3 selector hack (not supported by IE 6-8) */
.opacity_30:nth-child(n) 
    filter: none;

*重要提示：要从 RGBA 计算 ARGB（对于 IE），我们可以使用在线工具：

https://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/ http://web.archive.org/web/20131207234608/http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

【参考方案4】：

这个解决方案确实有效，试试吧。在 IE8 中测试

.dash-overlay 
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; 

【参考方案5】：

到目前为止，我发现的最佳解决方案是 David J Marland 在其blog 中提出的解决方案，以支持旧浏览器（IE 6+）中的不透明度：

.alpha30
    background:rgb(255,0,0); /* Fallback for web browsers that don't support RGBa nor filter */ 
    background: transparent\9; /* backslash 9 hack to prevent IE 8 from falling into the fallback */
    background:rgba(255,0,0,0.3); /* RGBa declaration for browsers that support it */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000); /* needed for IE 6-8 */
    zoom: 1; /* needed for IE 6-8 */


/* 
 * CSS3 selector (not supported by IE 6 to IE 8),
 * to avoid IE more recent versions to apply opacity twice
 * (once with rgba and once with filter)
 */
.alpha30:nth-child(n) 
    filter: none;

【参考方案6】：

大部分浏览器都支持 RGBa CSS 代码，但只有 IE8 及以下级别不支持 RGBa css 代码。为此，这是解决方案。对于解决方案，您必须遵循此代码，并且最好按照它的顺序进行，否则您将无法获得理想的输出。这段代码是我使用的，它几乎是完美的。如果它是完美的，请发表评论。

.class
 
        /* Web browsers that does not support RGBa */
        background: rgb(0, 0, 0);
        /* IE9/FF/chrome/safari supported */
        background: rgba(0, 0, 0, 0.6);
        /* IE 8 suppoerted */
        /* Here some time problem for Hover than you can use background color/image */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
        /* Below IE7 supported */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
 

【参考方案7】：

这是适用于包括 IE x 在内的大多数浏览器的透明解决方案

.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;

【参考方案8】：

要在 IE 中使用 rgba 背景，有一个后备选项。

我们必须使用过滤器属性。使用ARGB

    background:none;
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
    zoom: 1;

这是 rgba(255, 255, 255, 0.2)

的后备方案

把#33ffffff换成你的。

How to calculate ARGB for RGBA

【讨论】：

一直在寻找 ARGB 到 RGBA 转换器，谢谢！ web.archive.org/web/20131207234608/http://kilianvalkhof.com/…

【参考方案9】：

这很简单，你必须首先给出背景，因为 Internet Explorer 8 将支持 rgb 而不是 rgba，然后你必须像 filter:alpha(opacity=50); 一样给出不透明度

background:rgb(0,0,0);
filter:alpha(opacity=50);

【参考方案10】：

这对我解决 IE8 中的问题很有用：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";

干杯

【参考方案11】：

虽然晚了，但我今天不得不使用它，发现了一个非常有用的 php 脚本here，它可以让你动态创建一个 png 文件，就像 rgba 的工作方式一样。

background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);

脚本可以在这里下载：http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip

我知道它可能不是适合所有人的完美解决方案，但在某些情况下值得考虑，因为它可以节省大量时间并且可以完美运行。希望对某人有所帮助！

【讨论】：

这是如何工作的 - rgba.php URL 是否仅由不支持 rgba 的浏览器请求？或者它总是被所有用户请求，而根本没有显示？

我希望浏览器在尝试发出请求之前会自动看到第二个背景并忽略第一个背景。但是，这最多只是一个有根据的猜测。

【参考方案12】：

我迟到了，但对于发现这个的其他人 - 这篇文章非常有用： http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

它使用渐变滤镜来显示纯色但透明的颜色。

【讨论】：

类似：hammerspace.co.uk/2011/10/…

【参考方案13】：

创建一个大于 1x1 像素的 png（感谢三十点），并且与背景的透明度相匹配。

编辑：要回退到 IE6+ 支持，您可以为 png 指定 bkgd 块，这是一种颜色，如果不支持，它将替换真正的 alpha 透明度。您可以使用 gimp 修复它。

【讨论】：

是的。 rgba() IE 8 不支持颜色值。

为避免潜在问题，请使用1x1以外的任何大小：***.com/questions/7764751/…

在 2003 年可以接受，但在 2013 年不行。要么使用 -ms-filter 在旧 IE 中进行某种模拟支持，要么更好的是，忽略它。使用 IE8 的人应该受到没有看到边界半径、透明背景等的惩罚。

@EugeneXa 我为我的客户工作，而不是相反。如果他们使用 IE8，那么我支持它。惩罚潜在客户不是好生意。

@EugeneXa 在我的网站上接近 10%，他们通常是好客户。这里没有一个正确的答案。做数学并找出适合你的方法。对于某些网站来说，即使是 6% 也可能是巨大的！没有用户应该受到惩罚。我想你会后悔这种态度。

【参考方案14】：

透明的 png 图像在 IE 6 中不起作用，替代方法是：

使用 CSS：

.transparent 

    /* works for IE 5+. */
    filter:alpha(opacity=30); 

    /* works for IE 8. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

    /* works for old school versions of the Mozilla browsers like Netscape Navigator. */
    -moz-opacity:0.3; 

    /* This is for old versions of Safari (1.x) with KHTML rendering engine */
    -khtml-opacity: 0.3; 

    /* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */  
    opacity: 0.3; 

或者直接用 jQuery 来做：

// a crossbrowser solution
$(document).ready(function() 
    $(".transparent").css('opacity','.3');
);

【讨论】：

背景 alpha 与不透明度不同（它也不会使子元素透明）。

这既不是回答问题，也不是通过 jQuery（或一般的 javascript）应用的 CSS 跨浏览器解决方案。

【参考方案15】：

您使用 css 来更改不透明度。要应对 IE，您需要以下内容：

.opaque 
    opacity : 0.3;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);

但这唯一的问题是它意味着容器内的任何东西也将是 0.3 不透明度。因此，您必须更改您的 HTML 以拥有另一个容器，而不是在透明容器内，来保存您的内容。

否则 png 技术会起作用。除非您需要修复 IE6，这本身可能会导致问题。

【讨论】：

哈哈一个浏览器不像其他浏览器的典型案例，并且该浏览器的每个版本都不像 same 浏览器的其他版本......只有微软可以做到这一点非常成功……

@Paul D. Waite：除了呈现内容的方式之外，浏览器还提供了很多很多功能。偏离规范不是（或不应该）一个特性。

@Paul D. Waite：好的，我明白你的意思，但我的意思是，不同版本的 IE 行为如此不同，我发现自己必须创建不同的样式表对于每个版本...我有 IE6、7 和 8 的不同样式表...但我只有一个样式表适用于所有 FF/Chrome/Opera/Safari。 @Bobby Jack：借调...

@Bobby：当然可以，但是 IE 8 不会比 IE 7 或 IE 6 更偏离标准，对吗？

@ClarkeyBoy：当然。我发现我的 IE 8 样式表比我的 IE 6 样式表简单得多。 IE 是最奇怪的浏览器，但它正在慢慢与其他浏览器对齐。 Firefox 直到版本 3 才支持rgba()，Opera 直到版本 10 才支持。