网站建设服务热线 服务热线: 0571-88730320
网站建设公司
您的当前位置: 首页 » 网站设计 » 网页前端设计,如何快速使网页变灰?

网页前端设计,如何快速使网页变灰?

发布时间:2020-06-21 12:08:00

对于网页,页面颜色和布局主要由层叠样式文件CSS控制。网页整体颜色的变化可以通过CSS来控制。在CSS中,filter属性可用于呈现网页元素的图像、背景和材质。

如上图所示,通过设置过滤器的属性值来实现对颜色的控制。主要属性如下:

一、过滤器:模糊方法

该方法主要用于设置图像的高斯模和屏幕上像素的融合度,即模糊度。它的参数需要以像素值的形式提供。参数值越高,模糊度越高。示例如下:

如果未使用或未设置筛选器属性,则今天标题中显示的原始图片的效果如上图所示。我们可以进一步在页面中添加样式样式来调整filterblur参数值,从而达到页面的模糊级别。如果blur参数为2像素,则效果如下:

二过滤器:灰度方法

该方法是实现页面灰度化的主要方法,主要用于设置页面显示的灰度。参数值需要以百分比的形式提供,0%表示不进行灰度调整,100%表示页面完全转换为灰度。让我们以今天的头条为例来说明灰色背景。当灰度值设置为20%时,效果如图1所示。当灰度值设置为100%时,效果如图2所示

使用filter提供的grayscale()方法设置页面的灰度,如上图所示。我们可以很快把这一页涂成灰色。目前浏览器内核的种类很多,对CSS的支持和分析也不尽相同。在处理页面灰度时,需要考虑用户终端浏览器的类型,设置CSS样式的兼容性。实现基本代码描述如下:

-网络工具包-过滤器:灰度(100%);//(applesafari内核)-Moz-过滤器:灰度(100%);//(火狐浏览器)-MS-过滤器:灰度(100%);//(Internet Explorer(ie)-O-过滤器:灰度(100%);/(opera浏览器)

我们可以使用过滤效果的属性使页面变灰。下面是一个简单的演示,由我自己编写,用于灰显测试。原页效果如下:

根据编码要求,在页面头部写一个样式文件,实现灰度化。新增代码说明如下:

将灰代码添加到页面后,可以看到明显的灰化效果,具体描述如下:

本文提出了一种实现网页灰度化的简单方法。作为网页设计师和前端开发人员,应该能够掌握基本的使用方法,实现网页的快速变化。

茂名吒到建站公司 地址:浙江省杭州市余杭区联胜路10号 电话:0571-88730320 联系人:方经理