版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/baidu_39067385/article/details/81988473
概述
滤镜特效:指在页面被渲染之后再页面中某个局部呈现的一些特殊的视觉效果。
滤镜起源于SVG,但在SVG与CSS3中使用不同的方式来定义盒使用滤镜。CSS3中使用一个图型来定义滤镜
可以对页面上的任何可视元素使用滤镜特效;
在Chrome、Opera、以及Safari浏览器中在filter样式属性前添加"-webkit"浏览器供应商前缀;
1.grayscale滤镜(灰度滤镜)
作用:将彩色图像转换为灰度图像。
grayscale(百分比/浮点数)
100%时为黑白图像; 0%时仍为彩色图像
<style>
div{
display:flex;
flex-direction:row;
}
figure{
text-align:center;
}
figure:nth-child(2){
filter:grayscale(100%);
-webkit-filter:grayscale(100%);
}
</style>
</head>
<body>
<div>
<figure>
<img src="sl.jpg">
<figcaption>原始图片</figcaption>
</figure>
<figure>
<img src="sl.jpg">
<figcaption>使用灰度滤镜</figcaption>
</figure>
</div>
2.sepla滤镜
作用:为彩色图像添加一层棕褐色色调,使其呈现出老照片的效果;
sepla(百分比/浮点数)
0% 表示不做修改 100% 黑白老照片的效果
/**修改上面例子中的样例代码**/
figure:nth-child(2){
filter:sepla(100%);
-webkit-filter:sepla(100%);
}
3.saturate滤镜(饱和度滤镜)
作用:增强彩色图片饱和度,使其色彩变得更加鲜明,呈现海报或卡通的效果;
saturate(百分比)
大于100%的表示增强饱和度 小于100%的表示削弱饱和度;
/**修改上面例子中的样例代码**/
figure:nth-child(2){
filter:saturate(250%);
-webkit-filter:saturate(250%);
}
4.hue-rotate滤镜
hue-rotate(角度值)
/**修改上面例子中的样例代码**/
figure:nth-child(2){
filter:hue-roate(90deg);
-webkit-filter:hue-rotate(90deg);
}
5.invert滤镜(颜色翻转滤镜)
作用:将图像颜色翻转;
invert(百分比)
100%时相当于为一幅照片进行反相处理;
/**修改上面例子中的样例代码**/
figure:nth-child(2){
filter:invert(100%);
-webkit-filter:invert(100%);
}
6.opacity滤镜(透明度滤镜)
作用:为图像产生透明或半透明效果
opacity(百分比)
0%时为完全透明 100%时为完全不透明
/**修改上面例子中的样例代码**/
figure:nth-child(2){
filter:opacity(50%);
-webkit-filter:opacity(50%);
}
7.contrast滤镜(对比度滤镜)
作用:可以在全黑与原图像亮度之间调整图像的对比度。
contrast(百分比)
100%时为原图像对比度; 0%时为全黑效果 200%时为原图像对比度的2倍;
/**修改上面例子中的样例代码**/
figure:nth-child(2){
filter:contrast(200%);
-webkit-filter:contrast(200%);
}
8.blur滤镜(模糊滤镜)
作用:类似于在图像上添加一层玻璃遮罩,是图像具有一种烟雾效果。
blur(像素值)
为0时不发生变化
/**修改上面例子中的样例代码**/
figure:nth-child(2){
filter:blur(2px);
-webkit-filter:blur(2px);
}
9.drop-shadow滤镜(阴影滤镜)
作用:给图像添加一层阴影效果;
drop-shadow(阴影横向偏离距离 纵向偏离距离 模糊半径 阴影颜色)
/**修改上面例子中的样例代码**/
figure:nth-child(2){
filter:drop-shadow(4px -4px 6px green);
-webkit-filter:drop-shadow(4px -4px 6px green);
}