Question

首先，是否有可能（请参阅问题标题）在没有任何奇怪的解决方法魔法的情况下执行？

否则，最好的解决方法是什么？

HTML：

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

CSS：

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

我不希望背景颜色受到过滤器的影响。只有图像。解决方案应该不特定于亮度过滤器，但应该适用于任何过滤器。

Answer 1

您可以使用引用SVG过滤器的CSS过滤器，并使用单独的类将您的背景颜色添加到过滤器。类似的东西：

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

是否可以将CSS滤镜应用于图像，但不能应用于背景颜色？

1 个答案: