css3的filter,CSS3 的 filter(滤镜) 属性

滤镜) 属性"/>

css3的filter,CSS3 的 filter(滤镜) 属性

展示效果

html + css 核心代码

图片效果

.all {

200px;

height: 200px;

border: 1px solid black;

margin: 50px auto;

text-align: center;

}

span {

height: 50px;

line-height: 50px;

}

.all>img {

100%;

height: 150px;

}

#one {

/* 高斯模糊度 */

filter: blur(5px);

}

#two {

/* 使图片变亮 */

filter: brightness(300%);

}

#three {

/* 调整图像的对比度 */

filter: contrast(300%);

}

#four {

/* 给图像设置一个阴影效果 */

filter: drop-shadow(8px 8px 8px red);

}

#five {

/* 将图像转换为灰度图像 */

filter: grayscale(100%);

}

#six {

/* 色相旋转 */

filter: hue-rotate(45deg);

}

#seven {

/* 反转输入图像 */

filter: invert(100%)

}

#eight {

/* 转化图像的透明程度。opacity(%) */

filter: opacity(50%);

}

#nine {

/* 转换图像饱和度。saturate(%) */

filter: saturate(0%);

}

#ten {

/* 将图像转换为深褐色。sepia(%) */

filter: sepia(100%);

}

原图

高斯模糊度

使图片变亮

调整图像的对比度

给图像设置一个阴影效果

将图像转换为灰度图像

色相旋转

反转输入图像

转化图像的透明程度

转换图像饱和度

将图像转换为深褐色

声明：所有的图片只用于学习、不用做任何商业用途。如有侵权，请告知，立马删除。