引导者

CSS图片变灰

简介

CSS（层叠样式表）是一种用于描述网页外观和布局的语言。它允许用户通过设置各种属性来控制元素的外观，包括图片。其中一个属性可以使图片变灰。

多级标题

语法

示例

兼容性

内容详细说明

语法

使图片变灰的 CSS 属性是 `filter: grayscale()`。它的语法如下：```css filter: grayscale(percentage); ```其中 `percentage` 是一个介于 0（无灰度）到 100（完全灰度）之间的数字。

示例

以下示例将使图像完全变灰：```css img {filter: grayscale(100%); } ```可以通过调整 `percentage` 值来创建部分灰度效果。例如，以下示例将使图像变为 50% 灰度：```css img {filter: grayscale(50%); } ```

兼容性

`filter: grayscale()` 属性在所有现代浏览器中都得到支持。但是，它在 Internet Explorer 10 和更早版本中不受支持。

其他注意事项

值得注意的是，`filter: grayscale()` 属性会影响元素的整个内容，包括任何子元素。如果只想使图像的特定区域变灰，则需要使用其他技术，例如使用 SVG 蒙版或 Canvas。