继承背景颜色的子元素

Question

我正在尝试制作简单的视差效果，但我还想为背景图像添加自定义半透明颜色。

我尝试了很多解决方案，这个似乎可行，但是颜色应用在子元素的顶部上，即使我使用的是::before 选择器。

.spannerBg {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	background-color: rgba(255, 150, 0, 0.5);
	min-height: 300px;
}

.spannerBg::before {
	content: "";
	display: block !important;
	background-color: inherit;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

p {
  font-size: x-large;
}

<div class="spannerBg" style="
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    background-image:url(https://images.pexels.com/photos/1051075/pexels-photo-1051075.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)">
  
  <p>Somecontent</p>

</div>
<div>
  beiwrfa<br>ewnifiebfia<br>fbjwqbfwebfj<br>
</div>
<div class="spannerBg" style="
    background-image:url(https://images.pexels.com/photos/865711/pexels-photo-865711.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)">
    <p>Somecontent</p>
</div>

<div>
  <p>somecontent</p>
</div>

我看到了一些关于使用半透明 png 或假 div 的信息，但我希望它是 100% css。

我也看到了this question，但是所有的答案似乎要么不是 css 要么有同样的问题

Answer 1

您可以给 .spannerBg::before 一个 z-index: -1 和 .spannerBg 一个 z-index : 1

before 元素现在在其兄弟元素后面移动。

.spannerBg {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-color: rgba(255, 150, 0, 0.5);
  min-height: 300px;
  z-index: 1;
}

.spannerBg::before {
  content: "";
  display: block !important;
  background-color: inherit;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

p {
  font-size: x-large;
}

<div class="spannerBg" style="
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    background-image:url(https://images.pexels.com/photos/1051075/pexels-photo-1051075.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)">

  <p>Somecontent</p>

</div>
<div>
  beiwrfa<br>ewnifiebfia<br>fbjwqbfwebfj<br>
</div>
<div class="spannerBg" style="
    background-image:url(https://images.pexels.com/photos/865711/pexels-photo-865711.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)">
  <p>Somecontent</p>
</div>

<div>
  <p>somecontent</p>
</div>

Answer 2

我希望这会有所帮助：

.spannerBg {
background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	min-height: 300px;
}

.spannerBg::before {
	content: "";
	display: block !important;
	background-color: inherit;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

}

<div class="spannerBg" style="
background-image: linear-gradient( rgba(255, 150, 0, 0.5), rgba(255, 150, 0, 0.5) ), url(https://images.pexels.com/photos/865711/pexels-photo-865711.jpeg);
">
    <p>Somecontent</p>
</div>