关注互联网应用及运维技术的个人博客

前端常用的滤镜效果

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;
}
赞(0)
未经允许不得转载:飞天狒狒 » 前端常用的滤镜效果

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址