1

У меня есть 3 блока.
Первый - фоновая картинка, подключенная через CSS. Два остальных вложены в первый блок и представляют собой одну картинку, подключенную уже в html и немного текста.
Я хочу применить фильтр только к фоновому изображению, чтобы этот фильтр не задел два блока вложенных в него. Использовать отступы не хотелось бы.

.layer
{
	height: 530px;
	background-image: url(../img/imgbox.png);
        filter: brightness(55%);
}
<div class="layer">
	<div class="tabble"><img src="img/bxccl.png"></div>
</div>

2
  • Дополните вопрос своим кодом
    – Taypfoon
    3 июн 2018 в 22:56
  • это не возможно ... так как они унаследуют правила от своего родителя ...это как ДНК ...можно избежать наследия только если родитель другой
    – user33274
    3 июн 2018 в 23:22

1 ответ 1

1

Можно фоновую картинку вынести в псевдоэлемент и применить фильтр к нему.

.layer {
  position: relative;
  width: 640px;
  height: 480px;
}

.layer::before {
  position: absolute;
  content: ' ';
  width: inherit;
  height: inherit;
  background-image: url(https://placeimg.com/640/480/any);
  filter: brightness(55%);
}

.tabble {
  position: relative;
}
<div class="layer">
  <div class="tabble">
    <img src="https://placeimg.com/200/200/any">
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.