CSS背景不透明度与rgba在IE 8中不起作用

时间:2010-10-20 07:41:12

标签: css internet-explorer-8 rgba

我使用此CSS作为<div>的背景不透明度:

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

它在Firefox中运行良好,但在IE 8中运行不正常。如何使其正常工作?

15 个答案:

答案 0 :(得分: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 */

答案 1 :(得分:72)

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

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

答案 2 :(得分:14)

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

http://hammerspace.co.uk/2011/10/cross-browser-alpha-transparent-background-css

#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;
}

答案 3 :(得分: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');
});

答案 4 :(得分:7)

虽然很晚,我今天不得不使用它,发现了一个非常有用的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

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

答案 5 :(得分: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);
 }

答案 6 :(得分:5)

您使用css更改不透明度。要应对IE,你需要这样的东西:

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

但唯一的问题是它意味着容器内的任何东西也都是0.3不透明度。因此,您必须更改HTML以使另一个容器(而不是透明容器内容容纳您的内容)。

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

答案 7 :(得分:4)

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

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

答案 8 :(得分:2)

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

我们必须使用filter属性。使用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

答案 9 :(得分:1)

这对我解决IE8中的问题很有帮助:

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

干杯

答案 10 :(得分:1)

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

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

答案 11 :(得分:0)

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

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

答案 12 :(得分: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;
}

答案 13 :(得分:0)

我到目前为止找到的最佳解决方案是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;
}

答案 14 :(得分: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/