Можете ли вы применить фильтр CSS к фоновому изображению элемента стиля div?

Вот код, на который я смотрю:

 <div class="fullwidth-box vas_row-back1" style="background-color:
 rgba(99,59,0,0.79);background-image:
 url(&quot;http://example.com/wp-content/uploads/2015/11/myphoto.jpg&quot;);background-position:
 center center;background-repeat:
 no-repeat;padding-top:80px;padding-right:40px;padding-bottom:80px;padding-left:40px;margin-bottom:
 60px;margin-top:
 30px;-webkit-background-size:cover;-moz-background-size:cover;-o-
 background-size:cover;background-size:cover;background-
 attachment:none;">

Я могу управлять CSS для класса .vas_row-back1, но я не могу изменить вывод style= div, потому что это создает тема.

Я хочу применить фильтр к фону изображения. Когда я использую:

.vas_row-back1[style] {
-webkit-filter: grayscale(80%); /* Safari */
filter: grayscale(80%); }

Фильтр применяется ко всему элементу div, включая содержимое.

Когда я пытаюсь:

.vas_row-back1[style]:background-image {
-webkit-filter: grayscale(80%); /* Safari */
filter: grayscale(80%); }

Он вообще не регистрируется, ломает класс. Я хочу, чтобы фильтр применялся только к фоновому изображению DIV, но не к содержимому. Как вы думаете, это возможно? Мысли?


css background-image css-filters
person WPMonkey    schedule 20.04.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать:

background-blend-mode: difference;

Если он соответствует требованиям вашего браузера: https://caniuse.com/#feat=css-backgroundblendmode

person Iggy    schedule 10.09.2019

arrow_upward
0
arrow_downward

Вы должны просто сделать отдельный div с фоновым изображением, вложенным в этот основной div.

Другой альтернативой является использование псевдоэлемента (:before/:after) со стилем фона.

person Julie    schedule 20.04.2017