filter属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。Fitler属性常用于调整图像的渲染、背景或边框显示效果。
语法：
filter:grayscale(%);
grayscale(%)：将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。
示例：
首先，我们先建立一个demo，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 filter滤镜</title>
<style>
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="demo">
<img src="1.jpg-600" />
</div>
</body>
</html>效果是这样的（没有加任何滤镜效果）：
使用grayscale(%)设置图片灰度
.demo img{
-webkit-filter: grayscale(100%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: grayscale(100%);
/* 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。*/
}效果图：
更多CSS相关知识，可访问 CSS教程 ！！
以上就是css grayscale是什么意思？的详细内容，更多请关注0133技术站其它相关文章！
