您当前的位置:首页 > 电脑百科 > 站长技术 > 网站

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

时间:2020-04-04 14:38:10  来源:  作者:
一文读懂如何快速实现网页页面变灰?

灰色显示百度首页

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


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>编写样式文件,实现变灰处理,所添加代码描述如下:

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

变灰实现代码

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

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

页面变灰实现效果


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



Tags:页面变灰   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
灰色显示百度首页今天早上醒来一看各大网站,为表示对非典型肺炎疫情死难者的哀悼,各大网站均将页面变为灰色显示,显示的极为庄重肃穆。本文主要介绍常用网页页面快速变灰色的方...【详细内容】
2020-04-04  Tags: 页面变灰  点击:(98)  评论:(0)  加入收藏
▌简易百科推荐
今天我们来聊一下北京地区的《ICP经营许可证》有多好办,现在的互联网上提供的商机越来越多,增值电信业务十分火爆,企业通过互联网突破地域的限制,把公司产品卖到更远的地方,同时...【详细内容】
2021-12-17  梦想理应飞翔Yy    Tags:《ICP经营许可证》   点击:(12)  评论:(0)  加入收藏
转自: https://blog.kermsite.com/p/blog-intro/由于格式问题,部分链接、表格可能会失效,若失效请访问原文此专题将详细介绍如何从零开始搭建一个个人博客。Dec 01, 2021阅读时...【详细内容】
2021-12-17  LaLiLi    Tags:个人博客   点击:(7)  评论:(0)  加入收藏
SP证是第二类增值电信业务经营许可证的简称。分为全网SP证和地网SP证。申请经营许可证是在工信部申请,全网SP经营许可证的有效期是5年,全网SP许可证在工信部办理全网SP续期,地...【详细内容】
2021-11-01  s陳述    Tags:sp证书   点击:(39)  评论:(0)  加入收藏
现在还有许多人不知道EDI许可证是什么东西今天我就来给大家讲解一下.EDI许可证就是一种增值电信业务经营许可证。是针对在线数据处理和交易处理业务需求的专业资格证书。 《...【详细内容】
2021-10-28  soberXx    Tags:edi许可证   点击:(75)  评论:(0)  加入收藏
元素的化学概念,如周期表中的化学元素,一切物质都是由元素构成的。对程序员而言,网站建设制作就是代码构成网站。企业网站设计者也收集了各种各样的元素,但并非所有元素都需要运...【详细内容】
2021-10-26  南宁云尚网络    Tags:企业网站   点击:(40)  评论:(0)  加入收藏
在运营网站的过程中,有一件不可忽略的事情。那就是网站上线之前需要完成 ICP 备案。说到这里,很多朋友就提出疑问了~&middot; 什么是 ICP 备案呢?&middot; ICP 备案需要哪些材...【详细内容】
2021-10-22  启测云    Tags:ICP备案   点击:(46)  评论:(0)  加入收藏
最近有朋友问我,我公司有外资就不能申请ICP许可证了么?外资的定义是什么?其实是可以的,但有一个特定条件必须满足,外资公司是指公司有外资股东,比如香港、加拿大、美国、韩国等等,...【详细内容】
2021-10-21  小白速看Z    Tags:ICP   点击:(51)  评论:(0)  加入收藏
自互联网出现以来,超文本传输协议http协议被广泛用于在Web浏览器和网站服务器之间传递信息,但随着互联网的发展,另一种协议&mdash;&mdash;https出现,并与http一同服务于这个互联...【详细内容】
2021-10-20  我是FEIYA    Tags:https   点击:(44)  评论:(0)  加入收藏
Grafana Loki 是一个日志聚合工具,它是功能齐全的日志堆栈的核心。图片来自 包图网先看看结果有多轻量吧: Loki 是一个为有效保存日志数据而优化的数据存储。日志数据的高效索...【详细内容】
2021-09-14    51CTO  Tags:Loki日志   点击:(97)  评论:(0)  加入收藏
背景最近做微信小程序开发比较多,大家知道线上微信小程序为了安全起见,要求后端通信协议必须是HTTPS,这就要求需要安装证书。为了测试预发布线上环境,特地买了个最便宜的域名,为...【详细内容】
2021-09-14  小李子说程序    Tags:HTTPS证书   点击:(125)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条