详解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 相关文章推荐
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 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写的serv-u的web申请账号的程序
2006/10/09 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
javascript中数组的定义及使用实例
2015/01/21 Javascript
jquery简单倒计时实现方法
2015/12/18 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
Python判断Abundant Number的方法
2015/06/15 Python
python类中super()和__init__()的区别
2016/10/18 Python
Django实现发送邮件功能
2019/07/18 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
聘任书的写作格式及范文
2014/03/29 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
投标承诺函范文
2015/01/21 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书