我想用html和css实现这个目的：
我试图将容器的不透明度设置为0.3，将框设置为1，但它不起作用：两个div都有0.3不透明度。
我想要实现的效果是一个弹出框位于页面顶部。隐藏下面的内容（通过降低不透明度）突出显示。
据我所知，你不能以一种简单的方式做到这一点。这里有几个选项：
#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>您可以将不透明度与背景颜色结合使用，如下所示：
#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>尝试使用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>应用此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 Web浏览器声明background：transparent。
有关详细信息，请访问以下链接：
另一种解决方法是简单地使用叠加背景来创建类似的效果。
我个人喜欢黑色覆盖层，不透明度大约为65％，但是对于你想要做的事情，你可能想要在70％的圆形上使用白色覆盖层。
在Photoshop或GIMP中创建一个小的（100 x 100或更小）PNG，它具有您想要的颜色和不透明度。然后将其设置为灯箱的背景。
如果您在不同的不透明度下创建多个PNG，您可以使用JS轻松切换它们，也可以通过后端脚本动态加载。
从技术上讲，你不是想要做什么，但从美学角度来说，它可以产生非常相似的效果，而且明智的用户也能完成同样的事情。它也很容易做到，并且几乎可以在所有方面得到广泛支持。
具有不透明度设置的元素的任何子元素都将具有该不透明度。
要实现此样式，您可以使用rgba颜色和过滤器作为背景的IE，以及文本元素的不透明度。只要第二个框不是其中一个文本元素的子元素，它就不会继承不透明度。
这可能不是最正统的方法，但您可以为每个重复的div /容器使用一个小的半透明背景图像。看起来在这个时代，你应该能够在没有js的纯粹（简单而不是hackish）css中实现这一点，但正如上面的答案显示它不是那么直接......
使用平铺图像可能看起来过时，但不会担心所有浏览器。
使用background-color: rgba(#777788, 0.3);而不是不透明度可能可以解决问题。