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

Opacity of div's background without affecting contained element in IE 8?

提问by Govind Malviya

I want to set Opacity of div's background without affecting contained element in IE 8. have a any solution and don't answer to set 1 X 1 .png image and set opacity of that image because I am using dynamic opacity and color admin can change that

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

I used that but not working in IE 8

我使用过，但在 IE 8 中不起作用

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

and

和

rgba(0,0,0,0.3)

also.

还。

回答by Spudley

The opacitystyle affects the whole element and everything within it. The correct answer to this is to use an rgba background colour instead.

该opacity风格的影响在它整个元素和一切。对此的正确答案是改用 rgba 背景颜色。

The CSS is fairly simple:

CSS 相当简单：

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

...where the first three numbers are the red, green and blue values for your background colour, and the fourth is the 'alpha' channel value, which works the same way as the opacityvalue.

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

See this page for more info: http://css-tricks.com/rgba-browser-support/

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

The down-side, is that this doesn't work in IE8 or lower. The page I linked above also lists a few other browsers it doesn't work in, but they're all very old by now; all browsers in current use except IE6/7/8 will work with rgba colours.

不利的一面是，这在 IE8 或更低版本中不起作用。我上面链接的页面还列出了一些其他浏览器无法使用的浏览器，但它们现在都已经很旧了；除了 IE6/7/8 之外，当前使用的所有浏览器都可以使用 rgba 颜色。

The good news is that you can force IE to work with this as well, using a hack called CSS3Pie. CSS3Pie adds a number of modern CSS3 features to older versions of IE, including rgba background colours.

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

To use CSS3Pie for backgrounds, you need to add a specific -pie-backgrounddeclaration to your CSS, as well as the PIE behaviorstyle, so your stylesheet would end up looking like this:

要将 CSS3Pie 用于背景，您需要向-pie-backgroundCSS 以及 PIEbehavior样式添加特定声明，因此您的样式表最终将如下所示：

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

Hope that helps.

希望有帮助。

[EDIT]

[编辑]

For what it's worth, as others have mentioned, you can use IE's filterstyle, with the gradientkeyword. The CSS3Pie solution does actually use this same technique behind the scenes, but removes the need for you to mess around directly with IE's filters, so your stylesheets are much cleaner. (it also adds a whole bunch of other nice features too, but that's not relevant to this discussion)

至于它的价值，正如其他人所提到的，您可以使用filter带有gradient关键字的IE样式。CSS3Pie 解决方案实际上在幕后使用了相同的技术，但无需您直接使用 IE 的过滤器，因此您的样式表更加简洁。（它还添加了一大堆其他不错的功能，但这与本次讨论无关）

回答by sandeep

it's simple only you have do is to give

很简单，你要做的就是给予

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

& for IE use this filter

& 对于 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 */

you can generate your rgba filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

你可以从这里生成你的 rgba 过滤器http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

回答by Robert Koritnik

opacityon parent element sets it for the whole sub DOM tree

opacity在父元素上为整个子 DOM 树设置它

You can't really set opacity for certain element that wouldn't cascade to descendants as well. That's not how CSS opacityworks I'm afraid.

您无法真正为某些不会级联到后代的元素设置不透明度。opacity恐怕这不是 CSS 的工作方式。

What you can do is to have two sibling elements in one container and set transparent one's positioning:

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

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

then you have to set transparent position: absolute/relativeso its content sibling will be rendered over it.

那么你必须设置透明，position: absolute/relative这样它的内容兄弟将被呈现在它上面。

rgbacan do background transparency of coloured backgrounds

rgba可以做彩色背景的背景透明度

rgbacolour setting on element's background-colorwill of course work, but it will limit you to only use colour as background. No images I'm afraid. You can of course use CSS3 gradients though if you provide gradient stop colours in rgba. That works as well.

rgba元素上的颜色设置background-color当然有效，但它会限制您只能使用颜色作为背景。恐怕没有图像。如果您在 .css 文件中提供渐变停止颜色，您当然可以使用 CSS3 渐变rgba。这也有效。

But be advised that rgbamay not be supported by your required browsers.

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

Alert-freemodal dialog functionality

无警报模式对话框功能

But if you're after some kind of masking the whole page, this is usually done by adding a separate divwith this set of styles:

但是，如果您要对整个页面进行某种屏蔽，通常可以通过添加一组单独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);

Then when you display the content it should have a higher z-index. But these two elements are not related in terms of siblings or anything. They're just displayed as they should be. One over the other.

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

回答by maple_shaft

Try setting the z-index higher on the contained element.

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

回答by Daniel

What about this approach:

这种方法怎么样：

 <head>
 <style type="text/css">
  div.gradient {
   color: #000000;
   width: 800px;
   height: 200px;
  }
  div.gradient:after {
   background: url(SOME_BACKGROUND);
   background-size: cover;
   content:'';
   position:absolute;
   top:0;
   left:0;
   width:inherit;
   height:inherit;
   opacity:0.1;
  }
 </style>
 </head>
 <body>
  <div class="gradient">Text</div>
 </body>

回答by Armin Farah Al-Saada

It affects the whole child divs when you use the opacity feature with positions other than absolute. So another way to achieve it not to put divs inside each other and then use the position absolute for the divs. Dont use any background color for the upper div.

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

回答by Gajender Singh

Use RGBA or if you hex code then change it into rgba. No need to do some presodu elementcss.

使用 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 ---------

css ---------

background-color: #fff;
opacity: 0.8;

OR

或者

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

回答by Miguel Angel de la Marta

Maybe there's a more simple answer, try to add any background color you like to the code, like background-color: #fff;

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

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