IE8中的透明背景颜色

Posted 2023-03-06

【中文标题】IE8中的透明背景颜色

【英文标题】：Transparent Background color in IE8

【发布时间】：2013-09-02 12:39:38

【问题描述】：

有一个<tr> 和一个background-color（绿色）和一些<td>s 用它自己的（渐变）覆盖行的背景。然而，大多数单元格都有部分单元格的背景图像（排序箭头）以及透明的背景颜色。这就是我现在正在处理的问题。

在浏览器中一切正常除了 IE8。它以白色背景显示那些单元格。当我打开 F12 开发人员工具并取消选中 background-color: transparent 属性时，<tr> 中的绿色显示，就像它应该的那样。

我不能使用transparent image hack，因为排序箭头需要background-color。

如何让<tr>的绿色背景显示到IE8中的单元格？

【问题讨论】：

我试图重现问题：jsfiddle.net/8UDtM 但我在 IE8 中没有发现任何问题？

@thgaskell 我正在使用兼容模式的 IE，而 jsfiddle 完全搞砸了。

【参考方案1】：

试试这样的：

background: rgba(200, 54, 54, 0.5);

前三个数字是背景颜色的红色、绿色和蓝色值，第四个是 Alpha 通道。

Alpha 通道的工作方式与不透明度值相同。

对于似乎不支持 rgba 的 IE 8，您需要一个 opacity 属性，这应该更适合跨浏览器：

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

【讨论】：

它确实有效，绿色显示通过，但背景图像消失了。

@JoeZ 尝试使用background-color 而不是background，听起来您正在覆盖background-image 属性。

你明白了。实际上是将排序图像设置为background 而不是background-image。如果你更新你的答案，我会接受。

这对我不起作用。事实上，根据caniuse.com的说法，背景：rgba在IE8中根本不支持。

@Nathan 你是对的，我做了一些搜索并将其添加到我的答案中。谢谢。