Html 当父元素具有不透明度时禁用子元素的不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19457057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable opacity on child element when parent element has opacity
提问by PDev
I have a containerwith an opacity of 0.8. At the background, I have an image that shines through the content div. Now, I have a photo of my client in this container. The problem is, that it uses the opacity of the parent element as the opacity for this image is just relative to the container and not to the body.
我有一个不透明度为 0.8的容器。在背景中，我有一张通过内容 div 闪耀的图像。现在，我在这个容器中有我客户的照片。问题是，它使用父元素的不透明度，因为此图像的不透明度仅相对于容器而不是主体。
I have this code:
我有这个代码：
<div id="contentContainer" style="background: #FFFFFF; opacity: 0.8">
Content ...
<img src="..." style="opacity: 1.0" alt="Photo" />
</div>
This does not work, as explained below.
这不起作用，如下所述。
Has anybody an idea?
有人有想法吗？
回答by PDev
Solved this problem by changing it to the following:
通过将其更改为以下内容解决了此问题：
<div id="contentContainer" style="background: rgba(255,255,255,0.8);">
Content ...
<img src="..." alt="Photo" />
</div>
Used just rgba alpha instead of opacity. Now it works.
只使用 rgba alpha 而不是不透明度。现在它起作用了。
回答by M_Willett
As the other answers state, this is not possible using opacity, that is, with this method.
正如其他答案所述，使用不透明度是不可能的，也就是说，使用这种方法是不可能的。
A workaround/hack would be to add position: relative; z-index:2;to the parent element contentContainer. Then to add another element which has the opacity and other stuff on it. This is particularly useful if you have an image as the background
解决方法/黑客将添加position: relative; z-index:2;到父元素contentContainer。然后添加另一个具有不透明度和其他内容的元素。如果您将图像作为背景，这将特别有用
So your markup should look a little like this:
所以你的标记应该看起来像这样：
HTML
HTML
<div id="contentContainer">
Content ...
<img src="..." alt="Photo" />
<span id="contentBackground"></span>
</div>
CSS
CSS
#contentContainer { position: relative; z-index 2; }
#contentBackground {
position: absolute;
display: block;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: /* stuff */;
}
Note the z-indexproperty. These are important for making sure that the background element sits below the parent and doesn't overlap the content preventing click events.
注意z-index属性。这些对于确保背景元素位于父元素下方并且不会与阻止点击事件的内容重叠很重要。
This method could also be used with pseudo elements (:beforeor :after) for which you'd need to add content: '';.
此方法也可以与您需要添加的伪元素（:before或:after）一起使用content: '';。
回答by MC0de
This might help others who would want to use opacity, preventinga certain child elementfrom getting opaque.
这可能会帮助其他想要使用opacity 的人，防止某个子元素变得不透明。
You can use :not()Selector.
Take this sample.
您可以使用:not()选择器。拿这个样本。
<style type="text/css">
.redbg{
background-color:red;
}
.sample1 :not(.NonOpaque){
opacity:0.5;
}
.sample2:not(.NonOpaque){
opacity:0.5;
}
</style>
<div style="background-color:rgb(63,72,204); padding:15px; margin:15px;">
<div class="redbg sample1">
<div>
SAMPLE 1.
</div>
<div class="NonOpaque">
I am not Opaque.
Blah! Blah! Blah!
</div>
<div>
I am Opaque.
Blah! Blah! Blah!
</div>
<div>
I am Opaque.
Blah! Blah! Blah!
</div>
</div>
</div>
<div style="background-color:rgb(63,72,204); padding:15px; margin:15px;">
<div>SAMPLE 2.</div>
<div class="redbg sample2 NonOpaque">
<div style="padding:5px; margin:3px;">
I am not Opaque.
Blah! Blah! Blah!
</div>
</div>
<div class="redbg sample2">
<div style="padding:5px; margin:3px;">
We are all Opaque.
</div>
</div>
</div>
Output:
输出：
回答by CBroe
That's not possible – opacity is for an element and allit's content, and you can not “reverse” it.
那是不可能的——不透明度是针对一个元素及其所有内容的，你不能“反转”它。
0.8times 1.0is still 0.8, and higher values than 1 are not possible for opacity – so the only thing that you can try to do is take your image out of the container that has opacity, and try to make it lookas if it was inside (by positioning it over it, in some way or another).
0.8时间1.0仍然是0.8，并且不透明度不可能高于 1 的值 - 所以你唯一可以尝试做的就是将你的图像从具有不透明度的容器中取出，并尝试让它看起来好像它在里面（通过以某种方式将它定位在它上面）。
回答by Paulie_D
Opacity applies to the element and any children / content in the element.
不透明度适用于元素和元素中的任何子项/内容。
For partially transparent colos use RGBA bg colours.
对于部分透明的 colos，请使用 RGBA bg 颜色。
For partially transparent background images, a JS/JQ solution is required.
对于部分透明的背景图片，需要 JS/JQ 解决方案。
回答by Joy
Use background: rgba(red,green,blue,alpha) may be a good solution ,but,when you use with disabled attribute , you may find it does not work any more in iPhone .
使用背景： rgba(red,green,blue,alpha) 可能是一个很好的解决方案，但是，当您使用 disabled 属性时，您可能会发现它在 iPhone 中不再起作用。
