我想使用 html 和 css 来实现这一点：
我试图将容器的不透明度设置为 0.3，将盒子设置为 1，但它不起作用：两个 div 的不透明度都为 0.3。
我想要达到的效果是出现在页面顶部的弹出框。它通过淡化下面的内容（通过降低不透明度）来突出显示。
问问题
87003 次
12 回答
100
您可以将不透明度与背景颜色结合使用，如下所示：
#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>于 2012-04-05T05:04:42.930 回答
21
据我所知，你不能以简单的方式做到这一点。这里有几个选项：
使用绝对定位将框定位在容器“内部”。
#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 - 与上面几乎相同，但不必对位置和大小进行硬编码。
于 2012-04-05T00:59:12.467 回答
7
尝试使用 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>于 2018-01-12T15:55:19.137 回答
5
使用background-color: rgba(#777788, 0.3);而不是不透明度可能会解决问题。
于 2018-05-09T07:33:15.813 回答
4
你不能在不影响子元素的情况下应用 opacity 属性！
“不透明度适用于整个元素，包括其内容，即使该值不被子元素继承。因此，元素及其子元素相对于元素的背景都具有相同的不透明度，即使它们具有不同的不透明度相对彼此...如果您不想对子元素应用不透明度，请改用背景属性。” https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
如果您希望不透明度仅应用于背景，而不影响子元素，请使用：
background-color: rgba(255, 255, 255, .3)但是，如果将它们放在 div 父元素中并使用 CSS 位置属性，则可以达到预期的效果：
.parent {
border: solid green 3px;
position: relative;
width: 400px;
height: 200px;
}
.sibling-one {
border: solid red 3px;
position: absolute;
box-sizing: border-box;
width: 400px;
height: 200px;
opacity: .3;
}
.sibling-two {
border: solid blue 1px;
margin: 10px;
width: 200px;
height: 100px;
position: absolute;
transform: translateY(50%);
} <div class="parent">
<div class="sibling-one">
<p>A sibling's one element</p>
</div>
<div class="sibling-two">
<p>A sibling's two element</p>
</div>
</div>于 2020-07-27T09:55:37.160 回答
2
应用此 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)";
}
除此之外，您必须声明背景：对于 IE 网络浏览器透明。
欲了解更多详情，请访问以下链接：
于 2012-04-05T01:04:56.077 回答
1
设置了不透明度的元素的任何子元素都将采用该不透明度。
要实现这种风格，您可以使用 IE 的 rgba 颜色和过滤器作为背景，并在文本元素上使用不透明度。只要第二个框不是其中一个文本元素的子元素，它就不会继承不透明度。
于 2012-04-05T00:58:41.073 回答
1
另一种解决方法是简单地使用叠加背景来创建类似的效果。
我个人喜欢不透明度约为 65% 的黑色覆盖层，但对于您想要做的事情，您可能希望使用大约 70% 的白色覆盖层。
在 Photoshop 或 GIMP 中创建一个小的（100 x 100 或更小）PNG，它具有您想要的颜色和不透明度。然后只需将其设置为灯箱的背景。
如果您以不同的不透明度创建多个 PNG，您可以使用 JS 轻松地在它们之间切换，或者通过后端脚本在加载时动态切换。
从技术上讲，这不是您想要做的，但从美学上讲，它可以产生非常相似的效果，而 UX 明智的做法是完成同样的事情。它也很容易做到，并且几乎所有东西都得到广泛支持。
于 2018-03-29T13:45:20.660 回答
1
不透明度将始终由子元素继承，无论其中的元素是什么，到目前为止还没有建议的解决方法，当将子元素移动到透明背景之外不是弹出菜单/对话框创建中的选项时，解决方案是使用带有 rgba 的背景。
这是我创建的一个输入框，我可以使用 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
#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;
}
于 2020-03-07T01:47:36.583 回答
1
使用可以添加:before 或 :after 的元素。我的解决方案
<div class="container">
<div>
Inside of container element is not effected by opacity.
</div>
</div>
CSS。
.container{
position: relative;
}
.container::before{
content: '';
height: 100%;
width: 100%;
position: absolute;
background-color: #000000;
opacity: .25
}
于 2020-07-27T08:04:47.410 回答
0
这可能不是最正统的方法，但您可以为每个重复的 div / 容器使用一个小的半透明背景图像。似乎在这个时代，你应该能够在没有 js 的纯（简单而不是 hackish）css 中实现这一点，但正如上面的答案所示，这并不是那么简单......
使用平铺图像可能看起来过时了，但在所有浏览器中都可以放心使用。
于 2014-05-06T19:31:16.790 回答
0
您可以添加一个绝对位于容器后面的容器同级，大小相同，并对其应用不透明度。
并且在您的容器上不使用背景。
现在容器的孩子没有不透明的父母，问题就消失了。
于 2019-08-16T10:00:27.207 回答