一文带你了解网页的灰色效果是如何实现的

最新推荐文章于 2024-04-18 09:17:03 发布

花无缺~

最新推荐文章于 2024-04-18 09:17:03 发布

阅读量3.6k

点赞数 57

分类专栏： # CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/huawuque404/article/details/128141425

版权

CSS 专栏收录该内容

6 篇文章 7 订阅

订阅专栏

花无缺

👨‍💻个人主页：@花无缺
欢迎点赞👍 收藏⭐ 留言📝 加关注✅!
本文由 花无缺 原创

收录于专栏【CSS】

本篇文章目录

🌙前言
🌙filter
🌙filter实例
🌙总结

🌙前言

最近，很多网站的外观都变成了灰色的效果，也包括我们的CSDN，很多朋友好奇这是怎么实现的，不仅网页上的元素都变成灰色的了，而且原本是彩色的图片也都变成了灰色，难道是将图片用PS重新做成了灰色版的然后再上传使用吗？

接下来我就带大家了解一下网站灰色功能的实现方法。

首先，我们看一下各大主流网站的CSS代码：

CSDN
CSDN

B站
哔哩哔哩

网易云音乐

京东

淘宝
淘宝网

不难发现，以上网站的CSS代码中都使用到了一个CSS属性filter，正是使用了这个属性实现了网页的灰色功能。

所以，如果你想要让网页实现灰色功能，那么只需要加上这么一段代码：

html {
	filter:grayscale(100%);
}

这样，网页就全部变成灰色了。

我用自己的网站试了一下，果然是可以的：
变化前：

变化后：
注意：由于最近CSDN APP是全站灰色的，所以这篇文章的展示效果可能不是很好，建议大家在电脑端浏览本文章。

不仅所有元素都变成了灰色，而且图片同样可以变成灰色

🌙filter

那么我们来了解一下filter是什么
filter是CSS3中的新特性

功能：filter 属性定义元素（通常是）的视觉效果（如模糊和饱和度）

语法：

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

其中blur()，contrast()以及grayscale()等都是它的函数。

filter的函数：

Filter	描述
none	默认值，没有效果。
blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%)	给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%)	调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color)	给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下：``<offset-x> <offset-y> (必须)这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位.如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>，会有模糊效果).<blur-radius> (可选)这是第三个code><length>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值若未设定，默认是0 (则阴影的边界很锐利).<spread-radius> (可选)这是第四个 <length>值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器不支持第四个长度，如果加了也不会渲染。 <color> (可选)查看 <color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。
grayscale(%)	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg)	给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%)	反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。
opacity(%)	转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%)	转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1。
sepia(%)	将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
url()	URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如：`filter: url(svg-url#element-id)`
initial	设置属性为默认值
inherit	从父元素继承该属性

🌙filter实例

🌸模糊效果

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花无缺</title>
    <style>
        .a2 {
            filter: blur(5px);
        }
    </style>
</head>

<body>
    <h1>正常显示图片</h1>
    <img src="../../../../../../ChromeDownload/网页封面_745x419.png" alt="" class="a1">

    <h1>模糊图片</h1>
    <img src="../../../../../../ChromeDownload/网页封面_745x419.png" alt="" class="a2">
</body>

</html>

模糊效果

🌸灰色效果

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花无缺</title>
    <style>
        .a2 {
            filter: grayscale(50%);
            ;
        }
    </style>
</head>

<body>
    <h1>正常显示图片</h1>
    <img src="../../../../../../ChromeDownload/网页封面_745x419.png" alt="" class="a1">

    <h1>灰色图片</h1>
    <img src="../../../../../../ChromeDownload/网页封面_745x419.png" alt="" class="a2">
</body>

</html>

灰色效果

🌸改变对比度

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花无缺</title>
    <style>
        .a2 {
            filter: contrast(200%);
        }
    </style>
</head>

<body>
    <h1>正常显示图片</h1>
    <img src="../../../../../../ChromeDownload/网页封面_745x419.png" alt="" class="a1">

    <h1>对比度变化图片</h1>
    <img src="../../../../../../ChromeDownload/网页封面_745x419.png" alt="" class="a2">
</body>

</html>

对比度

🌙总结

经过上面对各大主流网站代码的分析，我们知道了网页的灰色效果是借助CSS3中的filter 实现的，而且它还可以实现其他的对图像的处理，比如模糊处理，对比度改变等。

大家可以自己动手实践下，看看自己是否学会了。

🌸欢迎关注我的博客：来和我一起成长吧！持续为你输出有价值的内容
🥇往期精彩好文：
📢【HTML基础知识详解】
📢【CSS基础认知】
你们的点赞👍 收藏⭐ 留言📝 关注✅
是我持续创作，输出优质内容的最大动力！
谢谢！

花无缺~

关注

57
点赞
踩
43

收藏

觉得还不错? 一键收藏
打赏
86
评论
一文带你了解网页的灰色效果是如何实现的

最近，很多网站的外观都变成了灰色的效果，也包括我们的CSDN，很多朋友好奇这是怎么实现的，不仅网页上的元素都变成灰色的了，而且原本是彩色的图片也都变成了灰色，难道是将图片用PS重新做成了灰色版的然后再上传使用吗？接下来我就带大家了解一下网站灰色功能的实现方法。
复制链接

扫一扫