网站素装不得不知道的技巧

张声录1

于 2020-04-04 22:45:13 发布

阅读量155

点赞数

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/zhangshenglu1/article/details/105319323

本文探讨了如何使用CSS滤镜功能将彩色图片转换为黑白。通过分析爱奇艺网站源码，展示了具体的CSS代码实现，包括使用filter属性的grayscale()函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网站图片颜色都是黑白的。那么这背后是怎么实现的。我打开爱奇艺网站，然后有如下源码：

html{
    filter: url("data:image/svg xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}