专业编程基础技术教程

网站首页 > 基础教程 正文

如何让网站变成灰色?

ccvgpt 2024-11-25 10:16:22 基础教程 1 ℃


如何让网站变成灰色?


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


【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里面添加样式代码：


<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）

Tags：

猜你喜欢

最近发表
标签列表