hi,欢迎访问本站!
当前位置: 首页Web前端正文

CSS使用图片变为灰色的方法

墨初 Web前端 502阅读

CSS样式中的 filter 属性取值为 grayscale 的话,可以将图像转为灰度图片,通过设置灰度的值可以图片的呈现不同的灰度效果。

css 图片变灰的方法

其它的不多说,直接上示例代码吧。

<style>
.img1 {
    -webkit-filter: grayscale(50%);
    /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}
.img2 {
    -webkit-filter: grayscale(70%);
    filter: grayscale(70%);
}
.img3 {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
</style>
<img src="https://www.73so.com/artimgs/js_1.png" />
<img class="img1" src="https://www.73so.com/artimgs/js_1.png" />
<img class="img2" src="https://www.73so.com/artimgs/js_1.png" />
<img class="img3" src="https://www.73so.com/artimgs/js_1.png" />

下面是运行后的图示,请忽略图片的水印!

CSS使用图片变为灰色的方法

标签:
声明:无特别说明,转载请标明本文来源!
相关推荐