CSS3 filter(滤镜) 属性

时间:2024-09-14 15:34:14

filter 属性定义了元素(通常是<img>)的可视效果

语法:

object.style.WebkitFilter="grayscale(100%)"

小栗子:

修改所有图片的颜色为黑白 (100% 灰度):

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

图片使用高斯模糊效果:

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

转化图像的透明程度:

img {
    -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
    filter: opacity(30%);
}