html - 带非透明按钮的透明背景

Question

我在具有半透明背景的图像上有一个标题区域。在标题区域内有一个按钮。我希望按钮不透明，但不确定如何操作。

http://dailyspiro.com/index.html

    <div class="col-md-12 landing-container">
        <img src="images/pig.jpg" class="main-image" width="70%">
        <div class="uvp">
        <h1>Spread Compassion & Track Your Impact</h1>
        <button class="join-button">Join Now</button>
        </div>
    </div> 

.uvp {
    background: rgb(66,51,51);
    opacity: .8;
    ...
}

.uvp h1 {
    color: #fff;
    ...
}

.join-button {
    background: rgb(48, 118, 213);
    ...
}

Answer 1

不透明度将应用于带有 .uvp 的元素及其所有子元素。你试过 background: rgba(66,51,51,0.8) 吗？

您还需要将图像放在 .uvp 后面 您可以使用 position: relative; z-index: -1; 用于图像。

更好的解决方案可能是 background: url(images/pig.png) center center no-repeatfor .container 但是你需要注意高度.container 你自己和背景大小，background-size: contain。