Можно ли применить фильтр CSS к изображению, но не к фоновому цвету?

Во-первых, можно ли (см. Вопрос название) сделать без любой странный обходной магии?Можно ли применить фильтр CSS к изображению, но не к фоновому цвету?

В противном случае, что является лучшим обходным решением?

HTML:

<img src="path/to/image.png" />

CSS:

img { 
    -webkit-filter: brightness(500%); 
    background-color: blue; 
}

я не хотите цвет фона будет зависеть от фильтра. Только изображение. Решение должно не быть конкретным фильтром яркости, но должно работать для любого фильтра.

источник

2015-10-22 mareoraft

Какой цели служит фон цвет? Не могли бы вы использовать контейнер, как эта скрипка (грубо) демонстрирует? https://jsfiddle.net/8bouk52j/1/ – Hypaethral

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

Вы можете использовать фильтр CSS, ссылающийся на фильтр SVG, и добавить свой цвет фона в фильтр с помощью отдельного класса. Что-то вроде:

img { 
 
    -webkit-filter: url(#brightoverback); 
 
    filter: url(#brightoverback); 
 
} 
 

 
#bck-color { 
 
    flood-color: blue; 
 
    }

 <svg width="0px" height="0px"> 
 
      <defs> 
 
      <filter id="brightoverback" x="0%" y="0%" height="100%" width="100%"> 
 
      <feColorMatrix type="matrix" values="5 0 0 0 0 0 5 0 0 0 0 0 5 0 0 0 0 0 1 0" result="bright-image"/> 
 
     <feFlood id="bck-color" result="blue-field"/> 
 
     <feComposite operator="over" in="bright-image" in2="blue-field"/> 
 
     </filter> 
 
      </defs> 
 
    </svg> 
 

 

 
    <img height="400" width="800" src="http://3.bp.blogspot.com/-6ZTUSkeNUHk/U5sKaUJ02xI/AAAAAAAARg8/oHbz-L-t2TM/s1600/PNG+Water+Ripple+(4).png">

источник

2015-10-23 00:34:14

У меня проблемы с работой. Где именно в файле HTML принадлежит SVG-фильтр? Должен ли он быть заключен в тег ' mareoraft

Да тег фильтра должен быть завернут в svg (можно установить размер svg на ширину и высоту 0) и тег defs. Он должен загружаться, прежде чем использовать его. Существует буквально тысячи примеров использования тега фильтра в сетях –

Можно ли применить фильтр CSS к изображению, но не к фоновому цвету?

ответ

Смежные вопросы