读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. html/css
  3. 正文

滤镜,好久不见

2020年06月18日 222点热度 0人点赞 0条评论

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;
}
赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: CSS
最后更新:2020年09月23日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
随笔 小程序 redux 悦读 阅读 node Echarts git CSS hook taro 闲谈 canvas Nginx react vue JavaScript flutter mysql
推荐文章
  1. css,filter滤镜笔记
  2. css关于居中的方式
  3. css超出部分设置省略号
  4. 小程序重置checkBox和radio样式
分类
  • flutter (11)
  • html/css (23)
  • Javascript (23)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (10)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号