Применение фильтров к фону в html

156

28 июня 2018, 03:30

У меня есть 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>

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не работает скрипт “button” JS

189

HTML

@media и абсолютное позиционирование кнопки

Не могу подогнать кнопку в нужное место при определенном разрешении монитора, имеется такой код формы поиска, HTML:

186

HTML

API audioplayer

Всем приветИспользую плагин audioplayer от mediaelements

183

HTML

Замена пути ссылки при клике

Помогите пожалуйста решить такую проблему

196