📌  相关文章
📜  css 使图像变灰 - CSS (1)

📅  最后修改于: 2023-12-03 15:30:10.693000             🧑  作者: Mango

CSS 使图像变灰

在网页设计中，有时我们需要让图像变灰，这样可以为网站增加一些特殊的效果。在CSS中，我们可以使用filter属性来实现这个效果。

语法
img {
    filter: grayscale(100%);
}
解释

filter属性可以应用一种或多种滤镜效果到元素上。其中，grayscale()函数可以将图像转换为灰度图像，参数的取值范围为0%~100%。

上面的代码中，我们将filter属性应用到img元素上，并使用grayscale()函数将图像转换为100%灰度图像。

示例

看下面的例子，我们将一张彩色图像变成了灰度图像。

<!DOCTYPE html>
<html>
<head>
    <title>Grayscale Image</title>
    <style>
        img {
            filter: grayscale(100%);
        }
    </style>
</head>
<body>
    <img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Fjords" width="300">
</body>
</html>
注意事项
  • filter属性在某些旧的浏览器中不被支持，可以使用polyfill库兼容这些浏览器。
参考文献