元素不透明度因伪元素而卡住

Question

我正在尝试在网站上构建一个“块”，其中包含不透明度较低的背景图像、一些具有常规不透明度的文本和一个具有常规不透明度的按钮

目前，我正在让背景图片和文字正常工作，但按钮卡在图片的不透明度上（与背景融为一体）。

这里是 html:

h1,p {
  text-align: center;
  position:relative;
  top:-70px;
  position: relative;
  color: navy;

}


.box1 {
  width: 97.5%;
  background-color: white;
  position: relative;
  padding-top: 200px;
  padding-bottom: 200px;
  padding-left: 30px;
  padding-right: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  margin-right: 1.25%;
  margin-left: 1.25%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

.box1::before {
  content: "";
  background-image: url(/static/background.jpeg);
  background-size: contain;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  position: absolute;
  opacity: 0.5;
}

.click {
  color:rgba(0, 0, 0, 0.19)
}

<div class="box1">
    <h1>Our Mission</h1>
    <p>THe organization plans to complete tasks x, y, z</p>
    <button class="click">Learn More</button>
</div>

Answer 1

将 position: relative 添加到您的 .click class。

旁注：您的 h1, p 选择器中有重复的 position: relative。

元素不透明度因伪元素而卡住

Element opacity stuck because of psuedoelement

html

css

button

opacity

web