网站简介

这个网站主要提供一个名为index的页面，该页面的背景图片采用了灰度效果。通过CSS样式和SVG滤镜，实现了将图像转换为灰度的功能。同时，为了兼容不同的浏览器，还添加了针对WebKit内核的滤镜样式。

CSS样式

/*#index * { filter: grayscale(grayscale=10) !important; */
-webkit-filter: grayscale(100%) !important; /* Safari */
filter: grayscale(100%) !important;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale") !important; /* Firefox */
-webkit-filter: grayscale(100%) !important; /* Chrome, Opera */
filter: grayscale(100%) !important;

SVG滤镜

<!-- 在index.html中添加以下代码 -->
<svg width="1" height="1">
<style>
.grayscale {
filter: url(#grayscale);
}
</style>
</svg>

通过以上CSS样式和SVG滤镜，实现了将图像转换为灰度的效果。这种技术可以广泛应用于网页设计中，为用户带来更舒适的视觉体验。