是不是一晚上的时间,发现各大平台的网站页面都变成了灰色了,包括微信支付图标,那么如何让网站变成灰色呢?今天在代码中以一张简单的图片为示例。

【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%); 以上是为了兼容不同浏览器

《完》

..

公众号:采故事的女孩

举报/反馈