前端如何实现网页变灰功能的?
备注:本文大量摘取前端充电宝公众号相关文章,大家感兴趣可以关注该公众号进行阅读学习
目录
1.引入
2.页面灰色实现方法
3.filter其他属性
A.blur():模糊
B.brightness():亮度
C.contrast():对比度
C.opacity():不透明度
E.sepia() :棕褐色
F.drop-shadow():阴影
G.saturate():饱和度
H.注意事项
1.引入
清明节的时候,各大网站都纷纷让主页显示褪色,那么这些效果是用代码怎么实现的呢?
例如百度的网站,bilibili的网站:
2.页面灰色实现方法
可以看到,这些网站实现置灰的方式不太一样,但是大同小异。本质上都是使用了 CSS 中的 filter 属性。下面是 MDN 对 filter 属性的解释:
简单来说,filter 属性就是用来给元素添加不同的滤镜。该属性中支持传入多种 Filter 函数,其中 grayscale() 函数就是用于置灰的关键。grayscale() 函数将改变输入图像灰度,该函数有一个参数,表示转换为灰度的比例。当值为 100% 时,完全转为灰度图像;当值为 0% 时图像无变化。值在 0% 到 100% 之间,则是效果的线性乘数。若未设置值,默认是 0。
代码:将整个html骨架全部换为灰色
html {filter: grayscale(100%);
}
那为啥很多网站的置灰不止这一行属性呢?可以看到京东的置灰代码如下:
html.o2_gray {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);-webkit-filter: gray;filter: gray;-webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}
其实这些属性最终的效果都是一样的,它们为了对 filter 属性进行兼容。filter 属性是 CSS3 增加的属性,在不同浏览器以及低版本浏览器上,filter 属性的兼容性不尽相同:
对于上面的代码,其中:
-webkit-filter
:带有 webkit 前缀可以在 webkit 内核的浏览器中生效;-moz-filter
:带有 moz 前缀可以在 Firefox 浏览器中生效;-ms-filter
:带有 ms 前缀可以在 IE 浏览器生效;-o-filter
:带有 o 前缀可以在 Opera 浏览器生效;最后三行都是为了兼容 IE 内核的浏览器。
那如何实现动态添加呢?只需要将这些滤镜属性写在一个类中,在需要的时候动态的将该类型添加到 html 标签上即可。
.gray {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);-webkit-filter: gray;filter: gray;-webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}
3.filter其他属性
A.blur():模糊
blur() 函数用于设置元素模糊效果, 它将高斯模糊视觉效果应用于元素。此函数接受一个 CSS 长度值来确定屏幕上有多少像素需要相互融合以生成模糊结果。传递的 CSS 长度值越大,应用到元素的模糊度就越高。如果不提供值,则使用默认值 0。
.image {-webkit-filter: blur(0|2px|5px); filter: blur(0|2px|5px);
}
下面是使用三个值时对应的效果:
B.brightness():亮度
brightness() 函数可用于调整图像的亮度级别,使其看起来更亮或更暗。当值为 0% 时,会产生全黑图像。值为 100% 或 1 会使图像保持其原始亮度级别。大于或小于 100% 或 1 的值决定图像的暗度或亮度。
.image {-webkit-filter: brightness(50%|100%|200%); filter: brightness(50%|100%|200%);
}
效果图:
C.contrast():对比度
contrast() 函数用于调整图像的对比度,也就是调整图像最暗和最亮部分之间的亮度差异 。它接受百分比或小数值来确定图像的对比度级别——值为 0 会导致完全灰色的图像。高于 100% 和 1 的值会增加对比度,而低于 100% 的参数会降低图像的对比度。
.image {-webkit-filter: contrast(50%|100%|200%); filter: contrast(50%|100%|200%);
}
效果图:
C.opacity():不透明度
opacity() 函数将透明效果应用于图像。它接受百分比或小数值来决定应用于图像的透明度。0% 或 0 的不透明度将产生完全透明的元素。100% 不透明度将显示不透明。将不透明度设置在 0% 和 100% 之间将使元素或图像部分透明。
.image {-webkit-filter: opacity(10%|40%|80%); filter: opacity(10%|40%|80%);
}
效果图:
那这个不透明度滤镜和CSS中的 opacity 属性有啥区别的?它们都用于控制元素的透明度。但是 filter 属性会启动硬件加速。浏览器会将计算任务卸载到图形处理单元 (GPU) — 一种旨在加速系统内图形渲染的专用处理器。这会提高浏览器的效率并释放 CPU 来执行其他任务。
E.sepia() :棕褐色
sepia() 函数可以为图像添加柔和的褐色色调,使图像看起来更温暖、更复古。它类似于使用灰度滤镜,但色调为褐色。它接受 0 到 1 之间的小数值,或最大为 100% 的百分比值。值为 0 会使图像保持不变。值为 100% 或 1 会将图像完全变为棕褐色,而介于 0% 和 100% 之间的值会使图像的色调介于其原始颜色和完全棕褐色之间。
.image {-webkit-filter: sepia(10%|40%|80%); filter: sepia(10%|40%|80%);
}
效果图:
F.drop-shadow():阴影
drop-shadow() 函数用于增加图像的阴影,和 box-shadow 的作用类似,使图像看起来更加立体。
drop-shadow() 函数接受四个参数:
<offset-x>
:长度值,指定元素和投影之间的水平距离。正值将阴影置于元素右侧,负值将阴影置于左侧。<offset-y>
:长度值,指定元素和投影之间的垂直距离。正值将阴影置于元素下方,负值将阴影置于其上方。<blur-radius>
: 阴影的模糊半径指定为 CSS 长度单位。值越大,阴影变得越模糊。如果未指定,则默认为 0,产生清晰且不模糊的阴影。不允许使用负值。<color>
:阴影的颜色。如果未指定,则默认为黑色。
代码:
.image-1 {filter: drop-shadow(0);
}.image-2 {-webkit-filter: drop-shadow(4px 4px 10px yellow);filter: drop-shadow(4px 4px 10px yellow);
}.image-3 {-webkit-filter: drop-shadow(8px 8px 12px yellow);filter: drop-shadow(8px 8px 12px yellow);
}
效果图:
G.saturate():饱和度
saturate() 函数用于改变元素中颜色的饱和度。饱和元素的颜色比较鲜艳;对于曝光不足的图像可以增加饱和度,反之亦然。饱和度可以用百分比表示,0% 表示完全不饱和,100% 表示与原图像一样。
代码:
.image {-webkit-filter: saturate(10%|150%|350%); filter: saturate(10%|150%|350%);
}
效果图:
H.注意事项
上面介绍的滤镜都是单个使用的,其实 filter 属性支持设置多个滤镜,其语法如下:
.multiple-effects {filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
}
前端如何实现网页变灰功能的?相关推荐
- 前端实现页面变灰功能(含 Flutter )
前端利用css3中新增的filter属性实现页面变灰功能.一键全局修改样式,加滤镜.加曝光等等.flutter 使用 ColorFiltered 包裹我们的 根widget 实现页面变灰. 今天从前端 ...
- 让整个网站网页变灰的方法
一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念.那么今天就说说,通过几行简单的代 ...
- 解决或者设置网页变灰-CSS-filter属性-哀悼
网页变灰 网页恢复 CSS filter filter CSS 属性将模糊或颜色偏移等图形效果应用于元素.滤镜通常用于调整图像,背景和边框的渲染. 官方Demo https://developer.m ...
- 网页变灰的方法,适用于IE
在哀悼日的时候如何让网页变灰? 1.适用于谷歌.火狐.360极速模式的代码 html{ filter: grayscale(100%); -webkit-filter: grayscale(100%) ...
- 技术大揭秘:百度、淘宝、QQ那些官网如何就只用一行代码实现网页变灰效果?...
转自进击的Coder,作者崔庆才 今天是 2020 年 4 月 4 日,星期六,清明节. 我们的国家经历了非常惨痛的时刻,很多英雄在救助他人的路上倒下,更有很多烈士英雄保卫人民的安危遇难,今天全国下降 ...
- 使网页变灰的代码(包括FLASH等所有网页元素).
使网页所有元素变灰的代码:把下面的代码加入网站的CSS文件中 第一种方法: html{ filter:progid:DXImageTransform.Microsoft.BasicImage(gray ...
- CSS 使网页变灰(文字加动画)
如果需要使网站变灰,在网页上加层滤镜就可以了. 1 html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } ...
- 哀悼日, 网页变灰的实现
今天看到很多网站网页都变成了黑色, 恰巧今天我也做了一个网页(部分截图) 我就拿这个网页做个实验吧! 只需要在代码<head>和</head> 的style之间插入: html ...
- 如何用一行代码实现网页变灰效果?
今天是 2020 年 4 月 4 日,星期六,清明节. 我们的国家经历了非常惨痛的时刻,很多英雄在救助他人的路上倒下,更有很多烈士英雄保卫人民的安危遇难,今天全国下降半旗,北京时间 10 点全国默哀三 ...
最新文章
- 魔性“合成大西瓜”背后,我用 350 行代码解开了碰撞之谜!
- golang 获取昨天日期
- 同是iPad退差价却不同?
- Verilog 编写规范
- 【商业落地篇】Gartner第四范式全球首发AutoML系列白皮书(限时免费下载)
- bootstrap-导航条反色的导航条
- python字符串用法_笔记:python字符串的使用
- Redis缓存安装Version5.0.7
- 计算机表格中如何计算数据透视表,[Excel]这才是在数据透视表中进行计算的正确操作!...
- office文档转换为html,OFFICE 文档转换为html在线预览
- linux安装字体文件怎么安装路径,Linux安装字体文件
- 知乎周源微信_每周源代码34-F#的兴起
- NTFS XCB定位
- MT940银行对账单怎么解析呢
- 销售开发新客户的方法 如何开拓新客户
- 5G NR无线通信频率分配表
- POJ 2395 Out of Hay 最小生成树 Kruskal
- project 2003
- Yonah是英特尔处理器酷睿core的开发代号
- AD原理图器件镜像翻转