Question

如果你能帮助我仅使用CSS3改变图像的颜色（图像有灰色阴影），我将不胜感激。

使用CSS3的一些属性，如过滤器......提前谢谢！

Answer 1

您可以通过在图像顶部覆盖伪元素并使用mix-blend-mode属性（检查browser support）来实现此目的。对于下面的示例，我使用了overlay。

＆＃13;

*{box-sizing:border-box;margin:0;padding:0;}
figure{
    display:inline-block;
    position:relative;
}
img{
    vertical-align:middle;
}
figure::after{
    background:#f00;
    bottom:0;
    content:"";
    left:0;
    mix-blend-mode:overlay;
    opacity:.75;
    pointer-events:none;
    position:absolute;
    right:0;
    top:0;
}

＆＃13;

<figure>
    <img alt="" height="250" src="https://unsplash.it/500/250?image=1082&gravity=south" width="500">
</figure>

＆＃13;

Answer 2

You can user filter css3,
.filter-me {
  filter: <filter-function> [<filter-function>]* | none
}
Where is one of:
    blur()
    brightness()
    contrast()
    drop-shadow()
    grayscale()
    hue-rotate()
    invert()
    opacity()
    saturate()
    sepia()
    url() - for applying SVG filters
    custom() - "coming soon"

Answer 3

据我所知，你无法将原始的灰色图像变成彩色图像。最接近的是使用sepia，但这不会按你的意愿工作。

这个想法首先使用彩色图像，然后使用grayscale(100%)或saturate(0%)将其设置为灰色，然后（可能在事件上，例如：悬停，点击，聚焦等）再次使用一个颜色筛选器属性

见下面的例子

img {
filter:grayscale(100%);
height:200px;
width:auto;
}
img:hover {
filter:hue-rotate(100deg);
}

<img src="https://placeimg.com/640/480/animals">

让我知道是否有帮助

如何仅使用CSS3更改图像的颜色（图像有灰色阴影）？

3 个答案: