css3滤镜属性filter让网页变黑白

CSS3的filter属性可以用来应用图像效果。要使网页上的内容变成黑白，可以使用grayscale滤镜。

下面是一个简单的例子，演示如何使用CSS3的filter属性将一个具有颜色的图片变成黑白：




<!DOCTYPE html>
<html>
<head>
<style>
.grayscale {
  filter: grayscale(100%);
}
</style>
</head>
<body>
 
<img src="image.jpg" alt="Colored Image">
 
<p>Apply grayscale filter to the image:</p>
<img class="grayscale" src="image.jpg" alt="Grayscale Image">
 
</body>
</html>

在这个例子中，.grayscale 类使用了grayscale(100%)滤镜，这会将所有颜色转换成灰度。如果你想应用这个效果到整个页面，可以将filter属性直接应用到body标签：




body {
  filter: grayscale(100%);
}

这样整个页面的内容都会以黑白显示。

css3滤镜属性filter让网页变黑白

评论已关闭

推荐阅读