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

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

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

HTML:

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

CSS:

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

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


css svg-filters
person mareoraft    schedule 22.10.2015    source источник
comment
Какой цели служит фоновый цвет? Не могли бы вы вместо этого использовать контейнер, как демонстрирует эта скрипка (грубо)? jsfiddle.net/8bouk52j/1   -  person Hypaethral    schedule 23.10.2015
comment
Изображение имеет полупрозрачные/прозрачные части, а цвет фона меняется в зависимости от того, что щелкает пользователь и т. д. Я предполагаю, что это будет лучший обходной путь, но я тайно надеюсь, что есть другой способ.   -  person mareoraft    schedule 23.10.2015

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать фильтр 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">

person Michael Mullany    schedule 23.10.2015
comment
У меня проблемы с тем, чтобы заставить это работать. Где именно в файле HTML находится фильтр SVG? Должен ли он быть заключен в тег <svg>? Нужно ли мне беспокоиться о порядке загрузки? - person mareoraft; 24.10.2015
comment
да, тег фильтра должен быть обернут в svg (можно установить размер svg равным 0 по ширине и высоте) и тегу defs. Он должен загрузиться перед использованием. В Интернете есть буквально тысячи примеров того, как использовать тег фильтра. - person Michael Mullany; 25.10.2015