div的背景不透明而不影响IE 8中包含的元素？

Question

我想在不影响IE 8中包含的元素的情况下设置div的背景的不透明度。有任何解决方案并且不回答设置1 X 1 .png图像并设置该图像的不透明度因为我使用动态不透明度和颜色管理员可以改变

我使用过但不在IE 8中工作

#alpha {
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

和

rgba(0,0,0,0.3)

也

Answer 1

opacity样式影响整个元素及其中的所有内容。对此的正确答案是使用rgba背景颜色。

CSS非常简单：

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

...前三个数字是背景颜色的红色，绿色和蓝色值，第四个是'alpha'通道值，其工作方式与opacity值相同。< / p>

有关详细信息，请参阅此页：http://css-tricks.com/rgba-browser-support/

缺点是，这在IE8或更低版本中不起作用。我上面链接的页面还列出了一些它不起作用的其他浏览器，但它们现在都很老了;除IE6 / 7/8外，目前使用的所有浏览器都可以使用rgba颜色。

好消息是你可以使用名为CSS3Pie的黑客强制IE使用它。 CSS3Pie为旧版本的IE添加了许多现代CSS3功能，包括rgba背景颜色。

要将CSS3Pie用作背景，您需要向CSS添加特定的-pie-background声明以及PIE behavior样式，因此您的样式表最终会如下所示：

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

希望有所帮助。

[编辑]

正如其他人所提到的那样，你可以使用IE的filter样式和gradient关键字。 CSS3Pie解决方案实际上在幕后使用了相同的技术，但是你无需直接使用IE的过滤器，因此你的样式表更加清晰。 （它还添加了许多其他不错的功能，但这与此讨论无关）

Answer 2

这很简单，你唯一能做的就是给予

background: rgba(0,0,0,0.3)

＆安培;对于IE使用此过滤器

background: transparent;
zoom: 1;    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */

您可以从http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

生成rgba过滤器

Answer 3

父元素上的

opacity为整个子DOM树

设置它

您无法为某些不会级联到后代的元素设置不透明度。这不是CSS opacity的工作方式，我担心。

你可以做的是在一个容器中放置两个兄弟元素并设置透明的位置：

<div id="container">
    <div id="transparent"></div>
    <div id="content"></div>
</div>

然后你必须设置透明position: absolute/relative，以便在其上呈现其内容兄弟。

rgba可以执行彩色背景的背景透明度

元素rgba上的

background-color颜色设置当然会有效，但它会限制您仅使用颜色作为背景。没有图像我害怕。如果在rgba中提供渐变停止颜色，您当然可以使用CSS3渐变。这也有效。

但请注意，您所需的浏览器可能不支持rgba。

无警报模式对话框功能

但是如果你在整个页面上进行某种掩饰，通常可以通过添加一组单独的div来完成：

position: fixed;
width: 100%;
height: 100%;
z-index: 1000; /* some high enough value so it will render on top */
opacity: .5;
filter: alpha(opacity=50);

然后，当您显示内容时，它应该具有更高的z-index。但这两个因素在兄弟姐妹或其他任何方面都没有关系。他们只是按照应有的方式展示。一个在另一个上面。

Answer 4

尝试在所包含的元素上设置更高的z-index。

Answer 5

也许有一个更简单的答案，尝试在代码中添加您喜欢的任何背景颜色，例如 background-color：#fff;

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}

Answer 6

这种方法怎么样：

service: adam-test-sls
provider:
  name: aws
  runtime: nodejs6.10
  region: eu-central-1
functions:
  hello:
    handler: handler.hello
    events:
      - http:
          path: hello
          method: get

Answer 7

当您使用不同于绝对位置的不透明度要素时，它会影响整个子div。所以另一种方法是实现它不要将div放在彼此内部然后使用div的绝对位置。上部div不要使用任何背景颜色。

Answer 8

使用RGBA，或者如果您使用十六进制代码，则将其更改为rgba。无需执行某些 presodu元素 CSS。

function hexaChangeRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexaChangeRGB('#FF0000', 0.2);

css ---------

background-color: #fff;
opacity: 0.8;

OR

mycolor = hexaChangeRGB('#FF0000', 0.2);
document.getElementById("myP").style.background-color = mycolor;