前端如何实现网页变灰功能?

简介: 前端如何实现网页变灰功能?

今天来从前端的角度看看网页置灰是如何实现的,以及相关使用技巧!

实现思路

先来看看一些主流网站是如何实现置灰的:

  • BiliBili:

1.webp.jpg

  • 淘宝:

2.webp.jpg

  • 京东:

38c2fbf9beb14a74a66f72c8379500c8_tplv-k3u1fbpfcp-zoom-in-crop-mark_1512_0_0_0.webp.jpg

  • 掘金:

4.webp.jpg可以看到,这些网站实现置灰的方式都完全一样,但都大同小异。本质上都是使用了 CSS 中的 filter 属性。下面是 MDN 对 filter 属性的解释:

CSS 属性 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 属性的兼容性不尽相同:3.webp.jpg对于上面的代码,其中:

  • -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);
}


相关拓展


接下来我们看看 filter 属性还有哪些实用的属性值!

css

复制代码

filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url();

(1)blur():模糊

blur() 函数用于设置元素**模糊效果,**它将高斯模糊视觉效果应用于元素。此函数接受一个 CSS 长度值来确定屏幕上有多少像素需要相互融合以生成模糊结果。 传递的 CSS 长度值越大,应用到元素的模糊度就越高。如果不提供值,则使用默认值 0。

css

复制代码

.image {
  -webkit-filter: blur(0|2px|5px);   filter: blur(0|2px|5px);}

下面是使用三个值时对应的效果:5.webp.jpg这个属性可以用来实现常见的毛玻璃效果。

(2)brightness():亮度

brightness() 函数可用于调整图像的亮度级别,使其看起来更亮或更暗。当值为 0% 时,会产生全黑图像。值为 100% 或 1 会使图像保持其原始亮度级别。大于或小于 100% 或 1 的值决定图像的暗度或亮度。

css

复制代码

.image {
  -webkit-filter: brightness(50%|100%|200%);   filter: brightness(50%|100%|200%);}

下面是使用三个值时对应的效果:6.webp.jpg

(3)contrast():对比度

contrast() 函数用于调整图像的对比度,也就是调整图像最暗和最亮部分之间的亮度差异 。 它接受百分比或小数值来确定图像的对比度级别——值为 0 会导致完全灰色的图像。高于 100% 和 1 的值会增加对比度,而低于 100% 的参数会降低图像的对比度。

css

复制代码

.image {
  -webkit-filter: contrast(50%|100%|200%);   filter: contrast(50%|100%|200%);}

下面是使用三个值时对应的效果:7.webp.jpg

(4)opacity():不透明度

opacity() 函数将透明效果应用于图像。它接受百分比或小数值来决定应用于图像的透明度。0% 或 0 的不透明度将产生完全透明的元素。100% 不透明度将显示不透明。将不透明度设置在 0% 和 100% 之间将使元素或图像部分透明。

css

复制代码

.image {
  -webkit-filter: opacity(10%|40%|80%);   filter: opacity(10%|40%|80%);}

下面是使用三个值时对应的效果:8.webp.jpg那这个不透明度滤镜和CSS中的 opacity 属性有啥区别的?它们都用于控制元素的透明度。但是 filter 属性会启动硬件加速。浏览器会将计算任务卸载到图形处理单元 (GPU) — 一种旨在加速系统内图形渲染的专用处理器。这会提高浏览器的效率并释放 CPU 来执行其他任务。

(5)sepia() :棕褐色

sepia() 函数可以为图像添加柔和的褐色色调,使图像看起来更温暖、更复古。它类似于使用灰度滤镜,但色调为褐色。它接受 0 到 1 之间的小数值,或最大为 100% 的百分比值。值为 0 会使图像保持不变。值为 100% 或 1 会将图像完全变为棕褐色,而介于 0% 和 100% 之间的值会使图像的色调介于其原始颜色和完全棕褐色之间。

css

复制代码

.image {
  -webkit-filter: sepia(10%|40%|80%);   filter: sepia(10%|40%|80%);}

下面是使用三个值时对应的效果:9.webp.jpg

(6)drop-shadow():阴影

drop-shadow() 函数用于增加图像的阴影,和 box-shadow 的作用类似,使图像看起来更加立体。

drop-shadow() 函数接受四个参数:

  • <offset-x>:长度值,指定元素和投影之间的水平距离。正值将阴影置于元素右侧,负值将阴影置于左侧。
  • <offset-y>:长度值,指定元素和投影之间的垂直距离。正值将阴影置于元素下方,负值将阴影置于其上方。
  • <blur-radius>: 阴影的模糊半径指定为 CSS 长度单位。值越大,阴影变得越模糊。如果未指定,则默认为 0,产生清晰且不模糊的阴影。不允许使用负值。
  • <color>:阴影的颜色。如果未指定,则默认为黑色。

css

复制代码

.image-1 {
  filter: drop-shadow(0);}.image-2 {
  -webkit-filter: drop-shadow(4px4px10px yellow);  filter: drop-shadow(4px4px10px yellow);}.image-3 {
  -webkit-filter: drop-shadow(8px8px12px yellow);  filter: drop-shadow(8px8px12px yellow);}

下面是使用三个值时对应的效果:10.webp.jpg

(7)saturate():饱和度

saturate() 函数用于改变元素中颜色的饱和度。饱和元素的颜色比较鲜艳;对于曝光不足的图像可以增加饱和度,反之亦然。 饱和度可以用百分比表示,0% 表示完全不饱和,100% 表示与原图像一样。

css

复制代码

.image {
  -webkit-filter: saturate(10%|150%|350%);   filter: saturate(10%|150%|350%);}

下面是使用三个值时对应的效果:11.webp.jpg

(8)注意事项

上面介绍的滤镜都是单个使用的,其实 filter 属性支持设置多个滤镜,其语法如下:

css

复制代码

.multiple-effects {
    filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();}

CSS 会根据它们出现的顺序将它们应用于元素:

img {
   filter: opacity(50%) drop-shadow(20px 10px 0px black);
}

除此之外,filter 属性还接受以下两个值:

  • initialfilter 属性的默认值,会解析为 none
  • inherit:从元素的直接父级计算的 filter 属性的值。


相关文章
|
4天前
|
缓存 前端开发 JavaScript
前端开发的必修课:如何让你的网页在弱网环境下依然流畅运行?
【10月更文挑战第30天】随着移动互联网的普及,弱网环境下的网页性能优化变得尤为重要。本文详细介绍了如何通过了解网络状况、优化资源加载、减少HTTP请求、调整弱网参数和代码优化等方法,提升网页在弱网环境下的加载速度和流畅性,从而改善用户体验。
74 4
|
22天前
|
存储 前端开发 JavaScript
🚀前端轻松实现网页内容转换:一键复制、保存图片及生成 Markdown
在现代前端开发中,提升用户的交互体验至关重要。本文将详细介绍如何使用 HTML2Canvas 和 Turndown 两个强大的 JavaScript 库,实现将网页选中文本转化为图片并保存或复制到剪贴板,或将内容转换为 Markdown 格式。文章包含核心代码实现、技术细节和功能拓展方向,为开发者提供了一个轻量级的解决方案,提升用户体验。
113 68
|
2天前
|
机器学习/深度学习 前端开发 JavaScript
前端小白也能学会的高大上技巧:如何让你的网页支持语音控制?
【10月更文挑战第31天】你是否曾梦想过只需动动嘴皮子就能操控网页?现在,这个梦想触手可及。即使你是前端小白,也能轻松学会让网页支持语音控制的高大上技巧。本文将介绍语音控制的基本概念、实现方法和具体示例,带你走进语音控制的奇妙世界。通过Web Speech API,你只需掌握基本的HTML、CSS和JavaScript知识,就能实现语音识别和控制功能。快来尝试吧!
13 4
|
2天前
|
搜索推荐 前端开发 开发者
前端开发的必修课:如何让你的网页在搜索引擎中脱颖而出?
【10月更文挑战第31天】前端开发不仅是构建网页与用户间桥梁的关键,还需注重搜索引擎优化(SEO)。优化网页结构、合理使用关键词、提升加载速度及整合社交媒体等技巧,能帮助网页在搜索引擎中脱颖而出,吸引更多用户。
8 4
|
4天前
|
JSON 前端开发 搜索推荐
惊!这些前端技术竟然能让你的网站实现个性化推荐功能!
【10月更文挑战第30天】随着互联网技术的发展,个性化推荐已成为提升用户体验的重要手段。前端技术如JavaScript通过捕获用户行为数据、实时更新推荐结果等方式,在实现个性化推荐中扮演关键角色。本文将深入解析这些技术,并通过示例代码展示其实际应用。
16 4
|
4天前
|
前端开发 JavaScript 搜索推荐
前端小白也能学会的高大上技巧:如何让你的网页支持暗黑模式?
【10月更文挑战第30天】随着现代网页设计的发展,暗黑模式已成为一种流行趋势,提升了用户的阅读体验并增强了网页的适应性。本文介绍了如何通过简单的HTML、CSS和JavaScript实现网页的暗黑模式。首先,定义两种主题的CSS样式;然后,使用JavaScript实现模式切换逻辑,并自动检测系统主题。通过这些步骤,前端小白也能轻松掌握暗黑模式的实现,提升网页的用户体验和个性化水平。
15 4
|
2天前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
7 2
|
4天前
|
编解码 前端开发 开发者
前端开发的必修课:如何让你的网页在不同设备上完美呈现?
【10月更文挑战第30天】随着互联网的普及,用户访问网页的设备种类繁多。前端开发者需确保网页在不同设备上完美呈现。本文介绍了一些最佳实践,包括使用响应式设计、相对单位、灵活的图片和视频、测试与优化及考虑交互设计,帮助实现跨设备兼容。
12 2
|
4天前
|
缓存 前端开发 JavaScript
前端小白也能掌握的高级技巧:如何让你的网页支持PWA特性?
【10月更文挑战第30天】随着互联网技术发展,渐进式网页应用(PWA)成为提升用户体验的重要手段。本文通过一个案例,介绍如何为在线问答社区网页应用添加PWA特性。从创建基本结构、添加Service Worker、创建Manifest文件到测试PWA特性,详细展示了每一步的操作方法。适合前端小白学习参考。
6 2
|
8天前
|
缓存 前端开发 JavaScript
前端性能优化:提升网页加载速度的10个技巧
【10月更文挑战第25天】在互联网时代,网页加载速度直接影响用户体验和搜索引擎排名。本文介绍了10个提升网页加载速度的技巧,包括减少HTTP请求、启用压缩、使用CDN、延迟加载非关键资源、优化图片、减少重定向、使用浏览器缓存、优化CSS和JavaScript、异步加载JavaScript以及代码分割。通过这些方法,可以显著提高网页性能,改善用户体验。
45 5