<返回更多

一文读懂如何快速实现网页页面变灰?

2020-04-04    
加入收藏
一文读懂如何快速实现网页页面变灰?

灰色显示百度首页

今天早上醒来一看各大网站,为表示对非典型肺炎疫情死难者的哀悼,各大网站均将页面变为灰色显示,显示的极为庄重肃穆。本文主要介绍常用网页页面快速变灰色的方法。


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进行变灰测试,原始页面效果如下:

一文读懂如何快速实现网页页面变灰?

测试原始页面

按照编码要求,我们在该页面头部<head>编写样式文件,实现变灰处理,所添加代码描述如下:

一文读懂如何快速实现网页页面变灰?

变灰实现代码

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

一文读懂如何快速实现网页页面变灰?

页面变灰实现效果


本文给出了网页页面变灰的实现简单方法,作为网页设计人员、前端开发人员应当能够掌握基本使用方法,实现页面的快速改变。

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>