grayscale滤镜(灰度滤镜)
彩色图片通过滤镜实现图片转变灰色
.sub02{
width: 330px;
float: right;
background: grey;
filter: grayscale(80%);
-webkit-filter: grayscale(80%);
-moz-filter:grayscale(80%);
height: 200px;
}
sepia滤镜(棕褐色滤镜)
让图片呈现出老照片的效果
.sub02{
width: 330px;
float: right;
background: grey;
filter: sepia(80%);
-webkit-filter: sepia(80%);
-moz-filter:sepia(80%);
height: 200px;
}
saturate滤镜(饱和度滤镜)
增强色彩图片的饱和度,让色彩更加鲜明,必须要使用大于100%,因为100%刚好是原色
.sub02{
width: 330px;
float: right;
background: grey;
filter: saturate(80%);
-webkit-filter: saturate(80%);
-moz-filter:saturate(80%);
height: 200px;
}
hue-rotate滤镜
该滤镜将图片中所有颜色沿着颜色环旋转一个角度,产生特殊的视觉效果
.sub02{
width: 330px;
float: right;
background: grey;
filter: hue-rotate(90deg);
-webkit-filter: hue-rotate(90deg);
height: 200px;
}
invert滤镜(颜色翻转滤镜)
定义图片颜色的翻转程度
.sub02{
width: 330px;
float: right;
background: grey;
filter: invert(90%);
-webkit-filter: invert(90%);
height: 200px;
}
opacity滤镜(透明度滤镜)
当属性值为100%时,完全不透明。该滤镜的作用与opacity样式属性的作用相同。但是opacity属性不具有硬件加速特性,而在某些浏览器中当使用opacity滤镜时将利用硬件加速特性,因而拥有更高的页面性能。
.sub02{
width: 330px;
float: right;
background: grey;
filter: opacity(60%);
-webkit-filter: opacity(60%);
height: 200px;
}
contrast滤镜(对比度滤镜)
调试图片的亮度
.sub02{
width: 330px;
float: right;
background: grey;
filter: contrast(50%);
-webkit-filter: contrast(50%);
height: 200px;
}
blur滤镜(模糊滤镜)
.sub02{
width: 330px;
float: right;
background: grey;
filter: blur(5px);
-webkit-filter: blur(5px);
height: 200px;
}
drop-shadow滤镜(阴影滤镜)
.sub02{
width: 330px;
float: right;
background: grey;
filter: drop-shadow(4px -4px 7px purple);
-webkit-filter: drop-shadow(4px -4px 7px purple);
height: 200px;
}
文章评论