江苏龙网

  1. 首页 > 资讯 > 科技 > >

浏览器@一文读懂如何快速实现网页页面变灰？


【浏览器@一文读懂如何快速实现网页页面变灰？】浏览器@一文读懂如何快速实现网页页面变灰？
本文插图

灰色显示百度首页
今天早上醒来一看各大网站 ， 为表示新冠肺炎疫情死难者的哀悼 ， 各大网站均将页面变为灰色显示 ， 显示的极为庄重肃穆 。 本文主要介绍常用网页页面快速变灰色的方法 。
CSS样式Filter属性对于网页而言 ， 页面色彩、布局等主要受到层叠样式文件CSS控制 ， 网站页面整体色彩的改变可以通过CSS进行整体的控制 。 在CSS中可以通过filter滤镜属性实现对网页元素进行图像、背景及素材的渲染 。
浏览器@一文读懂如何快速实现网页页面变灰？
本文插图

Filter调整测试Demo
如上图所示 ， 通过设置Filter的属性取值 ， 实现对颜色色彩的控制 。 主要属性说明如下：
1、filter: blur()方法
该方法主要用于实现对图像设置高斯模块 ， 及屏幕上的像素融合程度即模糊程度 。 其参数需要以像素值形式进行提供 。 参数值越大模糊程度越高 。 示例如下图：
浏览器@一文读懂如何快速实现网页页面变灰？
本文插图

网页中显示的****图标
在未使用filter属性未设置时 ， ****显示的原始图片效果如上图所示 。 我们可以进一步对页面添加style样式调整filter blur参数值 ， 可实现页面的模糊程度 。 如blur参数取值为2个像素 ， 效果如下：
浏览器@一文读懂如何快速实现网页页面变灰？
本文插图

blur参数取值为2显示效果
2、filter: grayscale()方法
该方法是用于实现页面变灰的主要方法 ， 主要用于设置页面显示的灰度 。 参数值需要以百分比形式进行提供 ， 0%表示未进行灰度调整 ， 100%表示将页面完全转化为灰度 。 我们还是以****图标为例 ， 对其进行灰度设置进行说明 。 当灰度取值设置为20%时效果如下图1所示 ， 当灰度值设置为100%时效果如图2所示：
浏览器@一文读懂如何快速实现网页页面变灰？
本文插图

图一：灰度20%设置显示效果
浏览器@一文读懂如何快速实现网页页面变灰？
本文插图

图二：灰度100%设置图片显示效果
使用filter提供的 grayscale()方法对页面进行灰度设置实现效果描述如上图 ， 我们可以快速实现将页面快速变灰 。 目前浏览器的内核型号较多 ， 对CSS的支持与解析情况不相同 ， 在进行页面灰度处理时需要考虑到用户终端浏览器的类型 ， 需要进行CSS样式的兼容性设置 。 实现基本代码描述如下：
-webkit-filter: grayscale(100%); //(Apple Safari内核)-moz-filter: grayscale(100%); //(Firefox浏览器)-ms-filter: grayscale(100%); //(Internet Explorer（IE）浏览器)-o-filter: grayscale(100%); //(Opera浏览器)网页变灰实例在明确网页变灰所需使用滤镜效果之后 ， 我们可以使用其属性进行页面变灰效果 。 以下给出本人编写的一个简单Demo进行变灰测试 ， 原始页面效果如下：
浏览器@一文读懂如何快速实现网页页面变灰？
本文插图

测试原始页面
按照编码要求 ， 我们在该页面头部
编写样式文件 ， 实现变灰处理 ， 所添加代码描述如下：
浏览器@一文读懂如何快速实现网页页面变灰？
本文插图

变灰实现代码
在页面添加变灰代码之后 ， 我们可以看出明显的变灰效果 ， 效果描述如下：


推荐阅读


上一篇：『淘宝网』阿里在东南亚重磅推出“淘宝客”功能！卖家：首秀成绩喜人

下一篇：■总有颜色适合你 GUEE公路车把带