CSS rgba设置背景透明度在IE 8下无效

Question

CSS rgba设置背景透明度在IE 8下无效

112

我正在使用以下CSS设置

的背景不透明度：

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

在Firefox中工作正常，但在IE 8中无法正常工作。我该如何使其工作？

- Moon

15个回答

71

创建一个比1x1像素更大的png图片（感谢thirtydot），并且与你的背景透明度相匹配。

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

- MatTheCat

11

为避免潜在问题，请使用除1x1以外的任何尺寸：https://dev59.com/Qmsz5IYBdhLWcg3wn5ba#7765128 - thirtydot

44

在2003年这样做是可以接受的，但在2013年不行了。可以使用-ms-filter来模拟旧版IE中的支持，或者更好的办法是忽略它。使用IE8-的人由于无法看到边框半径、透明背景等效果，应该受到惩罚。 - Evgeny

22

@EugeneXa 我为我的客户工作，而不是让他们为我工作。如果他们使用IE8，那么我会提供支持。惩罚潜在的客户并不是良好的商业行为。 - Eli

14

@EugeneXa 在我的网站上，回头客的占比更接近于10%，而且他们通常是好顾客。对于这个问题，没有单一正确的答案。你需要根据自己的情况进行计算和分析，看看哪种方案最适合你。即使对于某些网站来说6%也可能是很大的收益！没有用户应该受到惩罚。我认为你会后悔采取那种态度。 - Eli

2

我认为我们都可以同意一个事实，那就是IE8只配有优雅降级的待遇 ;) - Ben Sewards

显示剩余6条评论

17

我认为这是最好的，因为这个页面上有一个工具，可以帮助你生成透明度为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;
}

- ahgood

请记住，在过滤器中始终使用RGBA十六进制颜色，例如#004F80的RGBA格式为#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');
});

- Thomas

24

背景透明度和不透明度不同（它不会使子元素透明）。 - Alexey Smolyakov

1

这既不是回答问题，也不是通过jQuery（或JavaScript总体）应用CSS的跨浏览器解决方案。 - zrooda

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。我知道这可能不是每个人的完美解决方案，但在某些情况下值得考虑，因为它可以节省很多时间并且运行无误。希望对某些人有所帮助！

- Camilo Delvasto

2

这是怎么工作的 - rgba.php URL 只有在不支持rgba的浏览器中才被请求吗？还是所有用户都会请求它，只是没有显示出来？ - Darren Cook

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

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

- Pratik 1020

5

您可以使用CSS来改变透明度。为了兼容IE，您需要像这样的东西：

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

但是这样做的唯一问题是，容器内的所有内容也会变成0.3不透明度。因此，您需要更改HTML以使用另一个容器来容纳内容，而这个容器不能在透明容器内部。

否则，PNG技术可以解决问题。但是，您需要为IE6提供修复程序，这可能会导致其他问题。

- Coin_op

4

哈哈，典型的一个浏览器表现不像其他浏览器，而且该浏览器的每个版本也与同一浏览器的其他版本表现不同...只有微软能够如此成功地做到这一点... - ClarkeyBoy

3

@Paul D. Waite：浏览器除了呈现内容之外，还提供了许多功能。偏离规范不是（或不应该是）一种功能。 - Bobby Jack

好吧，我承认它们正在慢慢变得更好。但是如果它们一开始就坚持标准，那么它们将节省自己和Web开发人员大量的时间、资源和金钱...（不确定资源，但肯定是其他两个...） - ClarkeyBoy

@ClarkeyBoy：但这假定标准一开始就存在。标准和实现之间有一个微妙的互动关系（请参见Mark Pilgrim在此观点上的扩展）。对于一个浏览器来说容易实现的可能不容易为另一个浏览器所实现。CSS 3颜色模块在2002年首次“最后呼叫”。Firefox在六年后才实现了rgba()，而Safari则更早地拥有它。标准的过程不是完美的标准->完美的实现->每个人都高兴。 - Paul D. Waite

（仅供澄清，CSS 3颜色模块后来被从“最终呼叫”中撤回，当“最终呼叫”的定义发生变化时，该模块直到2008年中期才重新回归。） - Paul D. Waite

显示剩余3条评论

4

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

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

- Alex Harford

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

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。

如何为`RGBA`计算`ARGB`

- shyammakwana.me

一直在寻找那个ARGB转RGBA的转换器，谢谢！http://web.archive.org/web/20131207234608/http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/ - Justin

1

这个解决方案非常有效，请尝试。在IE8中进行了测试。

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

- Rohit

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- diablero13 · Accepted Answer

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

CSS rgba设置背景透明度在IE 8下无效

如何为RGBA计算ARGB

如何为`RGBA`计算`ARGB`