是不是一晚上的韶光,创造各大平台的网站页面都变成了灰色了,包括微信支付图标,那么如何让网站变成灰色呢?本日在代码中以一张大略的图片为示例。

【1】在代码中以一张大略图片为例

PHP网站不要html若何让网站酿成灰色 PHP

<!DOCTYPE html&gt;<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里面添加样式代码:

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

《完》

..

文章来源"大众号:大前端学习之旅(ID:gh_eba7868fc67a)