如何让网站变成灰色？
小薇的深漂日常2020-04-04 14:37
是不是一晚上的时间，发现各大平台的网站页面都变成了灰色了，包括微信支付图标，那么如何让网站变成灰色呢？今天在代码中以一张简单的图片为示例。
【1】在代码中以一张简单图片为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img src="栈出.png">
</body>
</html>
<style>
【1.2】网页效果图：
【2】在style里面添加样式代码：
html {
-webkit-filter: grayscale(100%);
/* webkit */
-moz-filter: grayscale(100%);
/*firefox*/
-ms-filter: grayscale(100%);
/*ie9*/
-o-filter: grayscale(100%);
/*opera*/
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter: gray;
/*ie9- */
}
</style>
【2.1】添加之后运行的页面效果图如下：
【2.3】 当然以上代码也可以添加在<html>标签里面，当作内联样式使用。
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">
【3】知识点：
CSS3 filter(滤镜)grayscale(%)：
属性将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
因此：修改所有图片的颜色为黑白 (100% 灰度): -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); 以上是为了兼容不同浏览器
《完》
..
公众号：采故事的女孩
举报/反馈
0
0
收藏
分享
