Дочерние элементы, наследующие цвет фона - PullRequest
Новая
       35

Дочерние элементы, наследующие цвет фона

1 голос
/ 09 марта 2019

Я пытаюсь сделать простой эффект параллакса , однако я также хочу добавить пользовательский полупрозрачный цвет к фоновому изображению.

Я перепробовал много решений, но, похоже, это работает, однако цвет применяется поверх дочерних элементов, даже если я использую селектор ::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.

Я также видел этот вопрос , но все ответы кажутся либо не css, либо имеют ту же проблему

Ответы [ 2 ]

2 голосов
/ 09 марта 2019

Вы можете указать свой .spannerBg :: before a z-index: -1 и .spannerBg a 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>
1 голос
/ 09 марта 2019

Надеюсь, это поможет: 

.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>
...