详解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轻松实现圆角效果
Nov 09 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
css3中less实现文字长阴影(long shadow)
Apr 24 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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垃圾回收机制引用计数器概念分析
2013/06/24 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
javascript some()函数用法详解
2014/11/13 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
浅谈JavaScript中的String对象常用方法
2015/02/25 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
2016/05/12 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
使用python实现strcmp函数功能示例
2014/03/25 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
python 字符串常用函数详解
2019/09/11 Python
python实现大学人员管理系统
2019/10/25 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
大学生军训感想
2014/02/16 职场文书
大学生先进事迹材料
2014/02/16 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
协议书怎么写
2014/04/21 职场文书
淘宝客服工作职责
2014/07/11 职场文书
项目备案申请报告
2015/05/15 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
Golang入门之计时器
2022/05/04 Golang