3.JavaWeb——如何实现页面变灰

最新推荐文章于 2025-12-15 18:09:20 发布

原创最新推荐文章于 2025-12-15 18:09:20 发布 · 511 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html

JavaWeb 专栏收录该内容

4 篇文章

订阅专栏

文章讲述了如何使用CSS的filter属性，特别是grayscale()函数来实现在特殊日子网站变灰的视觉效果，通过一个简单的HTML示例展示了如何在图片上应用灰度滤镜。

前言

生活中我们都见过到了一些特殊的日子，网站就会变成灰色，以此来表示哀悼。那么这样的效果是如何实现的呢？这个问题是在JavaWeb课上老师提出来的，我当时的想法是使用了类似ppt里面的遮罩效果——一个覆盖整个网页的灰色遮罩。带着这个疑问，我查找了更专业的做法。

实现方法

在知乎的一篇文章中提到了各大主流网站使用的方法，它们都是用到了css中的filter属性。

前端如何实现网页变灰功能？ - 知乎 (zhihu.com)https://zhuanlan.zhihu.com/p/588559403

CSS 属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

简单来说，filter 属性就是用来给元素添加不同的滤镜。该属性中支持传入多种 Filter 函数，其中 grayscale() 函数就是用于置灰的关键。grayscale() 函数将改变输入图像灰度，该函数有一个参数，表示转换为灰度的比例。当值为 100% 时，完全转为灰度图像；当值为 0% 时图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0。

下面是我使用grayscale()函数在一个简单的HTML页面实现变灰的效果：

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
    <link rel="stylesheet" href="../css/gray.css" type="text/css">
</head>
<body>
    <!--img标签 -->
    <img src="../img/1.png" height="250" width="180" border="10">
    <img src="../img/1.png" height="250" width="180" border="10">
    <img src="../img/1.png" height="250" width="180" border="10">
</body>
</html>