详解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中的5个有趣的新技术
Apr 02 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
May 28 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 HTML / CSS
CSS基础详解
Oct 16 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匹配字符中链接地址的方法
2014/12/22 PHP
php上传文件问题汇总
2015/01/30 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
python购物车程序简单代码
2018/04/18 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
python实现五子棋小程序
2019/06/18 Python
python 3.6.7实现端口扫描器
2019/09/04 Python
Python实现元素等待代码实例
2019/11/11 Python
Python交互环境下打印和输入函数的实例内容
2020/02/16 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
即兴演讲稿
2014/01/04 职场文书
中学生家长评语大全
2014/04/16 职场文书
团日活动总结报告
2014/06/25 职场文书
酒店辞职书范文
2015/02/26 职场文书
Python实现归一化算法详情
2022/03/18 Python
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android