详解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绘制三角形的简单方法
Jul 17 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 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 不同编码下的字符串长度区分
2009/09/26 PHP
php 文章采集正则代码
2009/12/28 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
学习ExtJS Panel常用方法
2009/10/07 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
python开发之str.format()用法实例分析
2016/02/22 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
python中的数据结构比较
2019/05/13 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
培训讲师邀请函
2014/01/10 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
工厂员工辞职信范文
2015/05/12 职场文书