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


110

我正在将此CSS用于a的背景不透明度<div>

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

在Firefox中可以正常工作,但在IE 8中则不能。如何使它工作?

Answers:


73

创建一个大于1x1像素(感谢三十点)的png,它与背景的透明度匹配。

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


2
对。rgba()颜色值不是在IE 8.支持
保罗D.韦特

11
为避免潜在的问题,请使用除以下以外的任何其他大小1x1stackoverflow.com/questions/7764751/…–
30点

43
在2003年是可以接受的,但在2013年是不可接受的。要么使用-ms-filter在旧IE中进行某种程度上的模拟支持,要么更好的是,忽略它。使用IE8的用户应受到惩罚,因为他们看不到边界半径,透明背景等。–
Evgeny

21
@EugeneXa我为客户服务,而不是相反。如果他们使用IE8,那么我会支持。惩罚潜在客户不是好生意。
伊莱2014年

14
@EugeneXa在我的网站上接近10%,他们通常是好的客户。这里没有一个正确的答案。做一下数学,找出最适合您的方法。对于某些网站,甚至6%也可能是巨大的!没有用户应该受到惩罚。我想你会后悔这种态度的。
伊莱2014年

241

要在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 */

2
这很有效,除非不幸的是,如果该元素被动态隐藏并使用jQuery重新显示,它似乎停止工作...
jackocnr

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

滤镜的不透明度0.6是多少?
2014年

10
透明度十六进制代码(第一对)可以在这里找到:(stackoverflow.com/questions/15852122/hex-transparency-in-colors
user1794295

2
有一个用于那些IE自定义十六进制值的计算器
nietonfir 2015年

14

我认为这是最好的,因为此页面上有一个工具可帮助您生成Alpha透明背景:

跨浏览器Alpha透明背景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;
}

并且remeber始终在过滤器中使用RGBA十六进制颜色:eq#004F80是#ed004F80
user956584

9

透明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');
});

24
背景Alpha与不透明度不同(它也不会使子元素透明)。
Alexey Smolyakov 2012年

1
这既不能回答问题,也不能通过jQuery(或JavaScript)跨浏览器应用CSS。
mystrdat 2012年

7

尽管很晚,但我今天不得不使用它,并在这里找到了一个非常有用的php脚本该脚本可让您动态创建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

我知道这可能不是每个人的完美解决方案,但是在某些情况下值得考虑,因为它可以节省大量时间并且可以完美地工作。希望能帮助到别人!


2
工作原理-rgba.php URL是否仅由不支持的浏览器请求rgba?还是总是得到所有用户的请求,而只是不显示?
Darren Cook

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

7

CSS中几乎所有浏览器都支持RGBa代码,但只有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);
 }

5

您可以使用CSS更改不透明度。要处理IE,您需要使用以下方法:

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

但这唯一的问题是,这意味着容器内的所有内容也将具有0.3的不透明度。因此,您必须将HTML更改为具有另一个容器(而不是位于透明容器内)来容纳您的内容。

否则,png技术将起作用。除非您需要针对IE6的修复程序,否则它本身可能会引起问题。


4
哈哈典型的情况是,一个浏览器的行为不像其他浏览器,并且每个版本的浏览器都不像其他版本的同一个浏览器……只有Microsoft才能非常成功地实现这一目标……
ClarkeyBoy 2010年

3
@Paul D. Waite:浏览器除了提供内容呈现方式外,还提供许多其他功能。违反规范不是(或不应成为)功能。
鲍比·杰克

@Paul D. Waite:好的,我明白你的意思了,但是我的意思是,不同版本的IE表现截然不同,以至于我发现自己必须为每个版本创建不同的样式表...对于IE6、7和8 ...但是对于所有FF / Chrome / Opera / Safari,我只有一个样式表。@Bobby Jack:借调了
ClarkeyBoy 2010年

@Bobby:当然可以,但是IE 8不会比IE 7或IE 6偏离标准更多?
Paul D. Waite,2010年

@ClarkeyBoy:可以。我发现我的IE 8样式表比我的IE 6样式表简单得多。IE是最奇怪的浏览器,但它正在与其他浏览器慢慢地保持一致。火狐不支持rgba(),直到3版本,和Opera不支持它,直到10版
保罗·韦特


2

rgba在IE中使用背景,有一个备用。

我们必须使用过滤器属性。使用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根据您的情况进行更改。

如何计算ARGBRGBA


一直在寻找那个ARGB to RGBA转换器,谢谢!web.archive.org/web/20131207234608/http://kilianvalkhof.com/…–
贾斯汀

1

这对我来说解决了IE8中的问题:

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

干杯


1

此解决方案确实有效,请尝试一下。在IE8中测试

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

0

非常简单,您必须首先给以rgb为背景,因为Internet Explorer 8将支持rgb而不是rgba,然后您必须像 filter:alpha(opacity=50);

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

0

这是大多数浏览器(包括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;
}

0

到目前为止,我发现的最佳解决方案是David J Marland在他的博客中提出的一种解决方案,用于支持旧浏览器(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;
}

0

经过大量搜索后,我发现以下适用于我的情况的解决方案:

.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),我们可以使用在线工具:

  1. https://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
  2. http://web.archive.org/web/20131207234608/http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.