Html 如何在不影响文本的情况下设置背景不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38994637/
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 set a background opacity without affecting the text
提问by user agent
I am basically trying to create this:
我基本上是在尝试创建这个：
Added a parent container with a background image,then a child container that needs to be transparent.
添加了一个带有背景图像的父容器，然后是一个需要透明的子容器。
Here my HTML:
这是我的 HTML：
<div class="scent-brand-contact">
<div class="scent-brand-container">
<section id="black-studio-tinymce-8" class="widget-1 widget-first widget-odd widget widget_black_studio_tinymce">
<div class="textwidget">
<p>All our fragrances are developed in compliance with the International Fragrance Association ensuring strict adherence to safety purity and manufacturing standards.</p>
<p>LEARN MORE ABOUT HOW SCENT BRANDING CAN BENEFIT YOUR BUSINESS</p>
</div>
</section>
<section id="text-4" class="widget-2 widget-last widget-even widget widget_text">
<div class="textwidget">
<button type="button">contact us today</button>
</div>
</section>
</div>
</div>
And the CSS:
和 CSS：
.scent-brand-contact{
position:relative;
background-image: url(images/lemon.jpg);
background-position: center center;
background-attachment: fixed;
background-size: cover;
min-height:380px;
}
.scent-brand-container {
background-color: #fff9c0;
padding: 10px;
opacity: 0.7;
padding-top: 5%;
margin: auto;
position: absolute;
top: 12%;
width: 100%;
min-height: 285px;
}
At the moment,it's happening that the button and the texts are also getting the opacity. How can I have the transparent background without affecting the text and the button?
目前，按钮和文本也变得不透明。如何在不影响文本和按钮的情况下拥有透明背景？
