Question

我在具有半透明背景的图像上方有一个标题区域。在标题区域内有一个按钮。我希望按钮不透明，但不知道如何做到这一点。

    <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-repeat，更好的解决方案可能是.container，但是您需要自己处理.container的高度和背景大小background-size: contain。< / p>

Answer 2

您需要使用z-index将透明区域放回到前面，将非透明区域放在前面例如： `

background: rgb(66,51,51);
opacity: .8;
position:absolute;
z-index:-1;

`

background: rgb(48, 118, 213); //if you want couldn't no change this class"

Answer 3

只需更改

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

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

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

到

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

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

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

透明背景与非透明按钮

3 个答案: