详解CSS3中强大的filter(滤镜)属性


Posted in HTML / CSS onJune 29, 2017

博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧。当然,这个属性的效果肯定不能跟ps相比,但是利用的好的话可以在节约很多空间下,把一张图做成两张图的效果。

1、定义   

filter,从字面意思来看就是滤镜,官方定义filter属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度);举个栗子:

<style>
    img{


/*灰度100%*/
        -webkit-filter:grayscale(100%);
    }
</style>
<img src="img/boke.png" alt="">

详解CSS3中强大的filter(滤镜)属性详解CSS3中强大的filter(滤镜)属性

看到这个效果,博友们是不是都开始对filter开始感兴趣了呢 ?

2、语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

可以看到,属性有很多可选值,他们都是什么意思呢?

  1. grayscale灰度
  2. sepia褐色(有种复古的旧照片感觉)
  3. saturate饱和度
  4. hue-rotate色相旋转
  5. invert反色
  6. opacity透明度
  7. brightness亮度
  8. contrast对比度
  9. blur模糊
  10. drop-shadow阴影

举个栗子:

这里用sepia调整

<head>
     <meta charset="UTF-8">
      <title>Title</title>
      <style>
          .img{

             -webkit-filter:sepia(70%);
          } 
      </style>
  </head>
 <body>
 <img src="img/boke.png" alt="">
 <img class="img" src="img/boke.png" alt="">
 </body>

示例图片:

详解CSS3中强大的filter(滤镜)属性 

3、示例   

下面,对filter属性的其中几个值做一个示例,其他好玩的东西需要博友们一起发掘,有啥好玩的可以跟我一起分享哟

(1)hue-rotate(色彩旋转)

效果看图吧,具体使用效果要靠大家发掘:

<style>
          .img{
              -webkit-filter:hue-rotate(330deg);
          }
      </style>
  </head>
  <body>
  <img src="img/boke.png" alt="">
  <img class="img" src="img/boke.png" alt="">
 </body>

效果图:

详解CSS3中强大的filter(滤镜)属性 

(2)blur(模糊)

blur(模糊效果,单位px)

<style>
          .img{
            -webkit-filter:blur(1px);
          }
      </style>
  <body>
  <img src="img/boke.png" alt="">
  <img class="img" src="img/boke.png" alt="">
 </body>

示例图片:

详解CSS3中强大的filter(滤镜)属性 

(3)invert反色

invert反色会吧图片变成底片的感觉,多说无益,看代码:

<style>
        .img{
            -webkit-filter:invert(100%);
        }
    </style>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body>

示例图片:

详解CSS3中强大的filter(滤镜)属性

好了,今天的分享就到这里了,谢谢大家的观看,其它的效果博主就不一一举例了。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用CSS3制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
h5调用摄像头的实现方法
Jun 01 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
浅谈移动端中的视口(viewport)的具体使用
Apr 13 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 #HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 #HTML / CSS
CSS3实现内凹圆角的实例代码
May 04 #HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 #HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
Apr 25 #HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 #HTML / CSS
深入理解css中vertical-align属性
Apr 18 #HTML / CSS
You might like
PHPlet在Windows下的安装
2006/10/09 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
python刷投票的脚本实现代码
2014/11/08 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
python是否适合网页编程详解
2019/10/04 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
Java语言的优势
2015/01/10 面试题
传播学专业毕业生自荐书
2014/07/01 职场文书
个人工作能力自我评价
2015/03/05 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
社区干部培训心得体会
2016/01/06 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫