淘先锋技术网

首页 1 2 3 4 5 6 7

css3中常用的样式,有很多让人惊叹的效果。其中一种常见的应用是灰色滤镜。当我们需要显示灰色图片,图片的背景或者整面页面的背景变成灰色的时候,我们可以使用灰色滤镜来实现。

css3中通过filter属性提供了灰色滤镜效果,具体代码如下:

img{
filter: grayscale(100%);
}

上述代码中,我们将图片的filter属性设置成grayscale(100%),即将其灰度值设置成100%,其它的值也可以控制图片的灰度程度。代码中的“%”表示可以是从0到100之间的数值。

如果需要将整面页面上的背景或者某个元素的背景变成灰色,我们可以使用以下代码:

.elem{
filter: grayscale(100%);
}

上述代码就可以将该元素的背景变成灰色,达到我们想要的效果。

需要注意的是,一些老版本的浏览器并不支持css3的灰色滤镜效果,因此在使用时需要特别注意兼容性问题。