如何在不影响带有 html/css 的子元素的情况下应用不透明度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10021302/
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 apply an opacity without affecting a child element with html/css?
提问by Benjamin Crouzier
I want to achieve this using html and css:
我想使用 html 和 css 来实现这一点：
I have tried to set the opacity of the container to 0.3 and the box to 1, but it doesn't work: both divs have 0.3 opacity.
我试图将容器的不透明度设置为 0.3，将框设置为 1，但它不起作用：两个 div 的不透明度均为 0.3。
The effect I am trying to achive is a popup box that comes on top of the page. It is highlighted by fading the content below (by lowering the opacity).
我想要达到的效果是出现在页面顶部的弹出框。它通过淡化下面的内容（通过降低不透明度）来突出显示。
采纳答案by Ilia Frenkel
As far as I know you can't do it in a simple way. There a couple of options here:
据我所知，你不能以简单的方式做到这一点。这里有几个选项：
Use absolute positioning to position box "inside" the container.
#container { opacity: 0.3; background-color: #777788; position: absolute; top: 100px; left: 100px; height: 150px; width: 300px; } #box { opacity: 1; background-color: #ffffff; position: absolute; top: 110px; left: 110px; height: 130px; width: 270px; }<div id="container"></div> <div id="box"> <p>Something in here</p> </div>Use Javascript - almost the same as above, but position and size don't have to be hardcoded.
使用绝对定位将框定位在容器“内部”。
#container { opacity: 0.3; background-color: #777788; position: absolute; top: 100px; left: 100px; height: 150px; width: 300px; } #box { opacity: 1; background-color: #ffffff; position: absolute; top: 110px; left: 110px; height: 130px; width: 270px; }<div id="container"></div> <div id="box"> <p>Something in here</p> </div>使用 Javascript - 与上面几乎相同，但位置和大小不必硬编码。
回答by Rohit Azad
You can use opacity in combination with background color, like this:
您可以将不透明度与背景颜色结合使用，如下所示：
#container {
border: solid gold 1px;
width: 400px;
height: 200px;
background:rgba(56,255,255,0.1);
}
#box {
border: solid silver 1px;
margin: 10px;
width: 300px;
height: 100px;
background:rgba(205,206,255,0.1);
}<div id="container">
containter text
<div id="box">
box text
</div>
</div>回答by Jon Bennett
Try using rgba as a 'pre content' overlay to your image, its a good way to keep things responsive and for none of the other elements to be effected.
尝试使用 rgba 作为图像的“前内容”叠加层，这是一种保持响应性且不影响其他任何元素的好方法。
header #inner_header_post_thumb {
background-position: center;
background-size: cover;
position: relative;
background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
border-bottom: 4px solid #222;
}
header #inner_header_post_thumb .dark_overlay {
position: relative;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
header #inner_header_post_thumb .dark_overlay .container .header-txt {
padding-top: 220px;
padding-bottom: 220px;
color: #ffffff;
text-align:center;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
font-size: 40px;
color: #ffffff;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
font-size: 24px;
color: #ffffff;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p {
font-size: 18px;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
font-weight: 700;
}<header>
<div id="inner_header_post_thumb">
<div class="dark_overlay">
<div class="container">
<div class="row header-txt">
<div class="col-xs-12 col-sm-12">
<h1>Title On Dark A Underlay</h1>
<h3>Have a dark background image overlay without affecting other elements</h3>
<p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>
</div>
</div>
</div>
</div>
</div>
</header>回答by vinitha
Apply this css rule
应用此 css 规则
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
In addition to this, you have to declare background: transparent for IE web browsers.
除此之外，您必须声明背景：对于 IE 网络浏览器透明。
For more details visit the following link:
欲了解更多详情，请访问以下链接：
回答by michaelward82
Any child of an element with opacity set will take on that opacity.
设置了不透明度的元素的任何子元素都将采用该不透明度。
To achieve this style you could use rgba colours and filters for IE for the background, and opacity on the textual elements. So long as the second box isn't a child of one of the text elements, then it won't inherit the opacity.
要实现这种风格，您可以使用 IE 的 rgba 颜色和过滤器作为背景，并在文本元素上使用不透明度。只要第二个框不是文本元素之一的子元素，它就不会继承不透明度。
回答by Brian D.
Another workaround is to simply use an overlay background to create a similar effect.
另一种解决方法是简单地使用叠加背景来创建类似的效果。
I personally like a black overlay with about a 65% opacity, but for what you are trying to do you may want to use a white overlay at round 70%.
我个人喜欢不透明度约为 65% 的黑色叠加层，但对于您想要做的事情，您可能希望使用 70% 左右的白色叠加层。
Create a small (100 x 100 or less) PNG in Photoshop or GIMP that has the color and opacity you want. Then just set that as the background of your light box.
在 Photoshop 或 GIMP 中创建一个小的（100 x 100 或更小）PNG，具有您想要的颜色和不透明度。然后将其设置为灯箱的背景。
If you create multiple PNGs at different opacities you can easily switch between them with JS or dynamically at load via backend scripting.
如果您以不同的不透明度创建多个 PNG，您可以使用 JS 轻松地在它们之间切换，或者通过后端脚本在加载时动态切换。
It's not technically what you are trying to do, but aesthetically it can give a very similar effect and UX wise accomplishes the same thing. It is also very easy to do, and widely supported across pretty much everything.
从技术上讲，这不是您要尝试做的事情，但从美学上讲，它可以提供非常相似的效果，并且 UX 明智地完成了同样的事情。它也很容易做到，并且几乎在所有方面都得到了广泛的支持。
回答by Claudio
Using background-color: rgba(#777788, 0.3);instead of opacity could maybe fix the problem.
使用background-color: rgba(#777788, 0.3);而不是不透明度可能可以解决问题。
回答by Aylian Craspa
Opacity will always inherits by the child element regardless whatever the element in there, there is no workaround up to today have suggested, when the moving of the child element outside the transparency background is not an option like in a popup menu/dialog box creation, use of background with the rgba is the solution.
不透明度将始终由子元素继承，无论那里有什么元素，直到今天没有建议的解决方法，当在透明背景之外移动子元素不是像在弹出菜单/对话框创建中那样的选项时，使用背景与 rgba 是解决方案。
Here is a input box that i created that i can turn on or off with the class property invisible by javascript
这是我创建的一个输入框，我可以使用 javascript 不可见的类属性打开或关闭它
<div id="blackout" class="invisible">
<div id="middlebox">
<p>Enter the field name: </p>
<input type="text" id="fieldvalue" />
<input type="button" value="OK" id="addfname" />
</div>
</div>
CSS
CSS
#blackout {
z-index: 9999;
background: rgba(200, 200, 200, 0.6);
height: 100%;
width: 100%;
display: block;
padding: 0px;
clear: both;
float: left;
position: absolute;
margin-top: -10px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -10px;
}
#blackout #middlebox {
border: thick solid #333;
margin: 0px;
height: 150px;
width: 300px;
background-color: #FFF;
top: 50%;
left: 50%;
position: absolute;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 10px 50px 0px 50px;
}
#middlebox p {
float: left;
width:100%;
clear:both;
}
#middlebox input {
clear:both;
margin-bottom:10px;
}
#middlebox input[type=text]{
width:100%;
}
#middlebox input[type=button]{
float:right;
width:30%;
}
.invisible{
visibility:hidden !important;
}
回答by megaSteve4
This might not be the most orthodox method but you can use a small semi-transparent background image for each div / container that repeats. It does seem that in this day and age you should be able to achieve this in pure (simple not hackish) css with no js but as the answers above show it isn't that straight forward...
这可能不是最正统的方法，但您可以为每个重复的 div/容器使用一个小的半透明背景图像。似乎在当今这个时代，您应该能够在没有 js 的纯（简单而不是 hackish）css 中实现这一点，但正如上面的答案所示，它并不是那么简单......
Using a tiled image might seem dated but will work no worries across all browsers.
使用平铺图像可能看起来过时，但在所有浏览器中都可以正常工作。
回答by Mikhail Batcer
You can add a container's sibling absolutely positioned behind container, with the same size, and apply opacity to it.
您可以添加绝对位于容器后面的具有相同大小的容器的同级，并对其应用不透明度。
And use no background on your container.
并且在您的容器上不使用背景。
Now container's children have no opaque parent and the problem vanishes.
现在容器的孩子没有不透明的父母，问题就消失了。
