详解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动画技术
Jan 01 HTML / CSS
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 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
PHP中HTML标签过滤技巧
2014/01/07 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
python获取文件扩展名的方法
2015/07/06 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
应届毕业生就业自荐信
2013/10/26 职场文书
人事助理岗位职责
2013/11/18 职场文书
求职信需要的五点内容
2014/02/01 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
企业文化学习心得体会
2016/01/21 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书