CSS 如何使子 div 不应该从父 div 继承不透明度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18057785/
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
how to make a child div should not inherit opacity from parent div?
提问by sun
Hi all i created a parent div .imainside which one div called .txtWhen i give a opacity to .imathen the opacity is applied to .txtautomatically this is obvious. But i don't want it to be in this way.
大家好，我.ima在其中创建了一个父 div ，其中一个 div 被称为.txt当我给一个不透明度时，.ima然后.txt自动应用不透明度，这是显而易见的。但我不希望它变成这样。
Only .imashould be in 0.5 Opacity and the Text in .txtshould be 100% visible.
仅.ima应为 0.5 不透明度，文本.txt应为 100% 可见。
Is there a way to do this?
有没有办法做到这一点？
Here is the fiddle
这是小提琴
I tried Giving Opacity to 1 in .txtits not working. I might Be doing this in a wrong way I don't know.Any help?
我尝试将不透明度设置为 1，因为.txt它不起作用。我可能以我不知道的错误方式做这件事。有什么帮助吗？
Here i mention the Different From the Question refering for possible Duplicate
在这里，我提到了与问题不同的问题，指的是可能的重复
There They Have given Suggestion to Use rgbaBut here i don't want to use it Because if i use rgbathen this will become either black or some other color that we'll mention.
在那里他们提出了使用rgba 的建议，但在这里我不想使用它，因为如果我使用rgba它，它将变成黑色或我们将提到的其他颜色。
I want to use background image here.
我想在这里使用背景图片。
This is a sample am proposed.
这是我提议的示例。
Things like there is no possible.
事情是不可能的。
Also I don't want to use .png images(with semi-transparency). images are subject to change that is why.
另外我不想使用 .png 图像（半透明）。图像可能会发生变化，这就是原因。
Any Way thanks for guys Who have given their answers here.
无论如何，感谢在这里给出答案的人。
回答by Barney
The simplest way of doing this assumes you only want .ima's background to be transparent, in which case you should remove opacityand establish a background-colourwith a value of rgba(X%,X%,X%, .5), in which case .txtinherits nothing and you can carry on.
最简单的方法是假设您只希望.ima的背景是透明的，在这种情况下，您应该删除opacity并建立background-colour一个值为 的rgba(X%,X%,X%, .5)，在这种情况下不.txt继承任何内容，您可以继续。
<div class="ima">
<div class="txt">
...
</div>
</div>
CSS for transparent background:
透明背景的 CSS：
.ima {
/* rgba is Red, Green, Blue, Alpha:
* put in your colour as RGB then add opacity at the end */
background-color: rgba(255, 0, 0, .5);
}
But if you want some of .ima's children nodes to inherit the transparency (for instance text and elements other than .txt) then the simplest way is to create an immediate descendant that matches the dimensions of .imaand applies the opacityrule:
但是，如果您希望 的某些.ima子节点继承透明度（例如文本和除 之外的元素.txt），那么最简单的方法是创建一个与 的尺寸匹配.ima并应用opacity规则的直接后代：
<div class="ima">
<div class="txt">
...
</div>
<div class="ima__transparency">
...
</div>
</div>
CSS:
CSS：
.ima {
position: relative;
}
.ima__transparency {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: .5;
}
.txt {
position: relative;
z-index: 1;
}
回答by robertc
You can't not inherit opacity, your options are:
你不能不继承不透明度，你的选择是：
- Adjust your markup so that
.txtis not a child of.imaand then use absolute positioning - Don't use opacity, make
.txtcover the same area as.imaand give.txta semi-transparent background If your target audience supports gradientsand multiple backgrounds, you can layer an obscuring gradient over the image:
background: linear-gradient( rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url('http://www.bing.com/az/hprichbg/rb/NewportOR_ROW5865752464_1366x768.jpg');
- 调整您的标记，使其
.txt不是 的子项.ima，然后使用绝对定位 - 不要使用不透明度，
.txt覆盖相同的区域.ima并提供.txt半透明背景 如果您的目标受众支持渐变和多个背景，您可以在图像上叠加一个模糊渐变：
background: linear-gradient( rgba(255,255,255,0.5),rgba(255,255,255,0.5)), url('http://www.bing.com/az/hprichbg/rb/NewportOR_ROW5865752464_1366x768.jpg');
Using this approach you actually only need one divif it's just the text and the image you want to display.
如果只是要显示的文本和图像，则使用这种方法实际上只需要一个div。
回答by sun
Create a png image(1px/1px) transparent with 60% opacity using photoshop and call in your parent div i.e.
使用 photoshop 创建一个透明的 png 图像（1px/1px），不透明度为 60%，并在你的父 div 中调用，即
.ima{
background:url(imagename.png) repeat 0 0;
}
回答by James South
Unfortunately you can't using opacity as it is inherited by design.
不幸的是，您不能使用不透明度，因为它是由设计继承的。
You could, however, if you are only seeking to make the background color of the parent div semi-transparent using rgba color syntax and a fallback for older versions of ie that do not support the syntax.
但是，如果您只想使用 rgba 颜色语法使父 div 的背景颜色半透明，并且不支持该语法的旧版本 ie 的后备，则可以。
e.g. Create a white background with an opacity of 50%.
例如，创建一个不透明度为 50% 的白色背景。
.parent{
background: rgba(255, 255, 255, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF); /* IE6 & 7 */
zoom: 1;
}
/* IE9 hack to remove filter */
.parent:not(dummy) {
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";
}
The first two hex values in the filters represent the opacity of the background. There is a great explanation and rgba to hex converter here.
过滤器中的前两个十六进制值表示背景的不透明度。有一个很好的解释和RGBA以十六进制转换器在这里。
Word of note. Using this technique reveals a bug in IE where hyperlinks will be exposed through the background of the container if placed above them, for example if used to generate a model background.
注意事项。使用此技术可揭示 IE 中的一个错误，即超链接将通过容器的背景暴露在它们之上，例如，如果用于生成模型背景。
回答by Anon
You can use :after/:before
您可以使用 :after/:before
HTML <div>asdsadasd</div>
CSS
HTML <div>asdsadasd</div>
CSS
div{position:relative;}
div:after{
content:'';
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: #000;
opacity:0.3;
z-index: -1;}
回答by Lapixel
The thing is, the opacity property applies on the whole block. It means that if you apply a 1 opacity to any child element, it will have the maximum opacity towards its parent.
问题是，不透明度属性适用于整个块。这意味着如果您将 1 不透明度应用于任何子元素，它将对其父元素具有最大不透明度。
I suggest you use a semi transparent PNG background and add a fix so that older versions of internet explorer handle the opacity :
我建议您使用半透明的 PNG 背景并添加一个修复程序，以便旧版本的 Internet Explorer 处理不透明度：
.ima {
width:auto;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='url_to_transparent_image.png');
}
.ima[class] {
background-image:url('url_to_transparent_image.png');
}
.txt {
color:white;
}
That is, it's only if you really need a totally opaque text. You can also set the opacity of the parent a bit higher so that your text isn't too transparent and avoid using "dirty" CSS tricks.
也就是说，只有当你真的需要一个完全不透明的文本时。您还可以将父级的不透明度设置得更高一些，这样您的文本就不会太透明并避免使用“脏”的 CSS 技巧。
