透明背景与非透明按钮

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-repeat.container但是您需要自己照顾.container的高度和背景大小，并带有background-size: contain。

Answer 2

您需要使用 z 索引将透明区域放回原处，将非透明区域放在前面 例如： `

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);
...
}