css3如何让图片变灰 |css渐变怎么写

img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}

通过将filter属性设置为grayscale(100%)，可以将图像变为完全灰色。请注意，-webkit-filter属性也需要设置为相同的值，以便在Safari和Chrome等Webkit浏览器中使用。

如果您只想让图像的一部分变灰，也可以使用CSS3的透明度属性。例如，以下代码将图像的顶部30%设置为灰度：

img {
height: 500px;
width: 800px;
position: relative;
}
img:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30%;
background: rgba(0,0,0,0.5);
z-index: 1;
}
img:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 30%;
background: url(your-image.jpg);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
z-index: 2;
}

在这个示例中，大家使用:before和:after伪元素将图像的顶部30%覆盖，并将:before元素的背景设置为50%不透明度的黑色。大家然后使用:after来显示完全灰色的图像，从而模拟将图像的顶部部分变灰。