CSS3中强大的filter(滤镜)属性

　　　　博主最近在做网站的过程中发现了一个非常强大的CSS3属性，就是filter(滤镜)属性，喜欢p图的朋友看名字都应该知道这是什么神器了吧。当然，这个属性的效果肯定不能跟ps相比，但是利用的好的话可以在节约很多空间下，把一张图做成两张图的效果。

　　　　

1定义 　　

　　　　filter，从字面意思来看就是滤镜，官方定义filter属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)；举个栗子：

<style>

    img{
　　　　　　/*灰度100%*/

        -webkit-filter:grayscale(100%);

    }

</style>

<img src="img/boke.png" alt="">

　　　　看到这个效果，博友们是不是都开始对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模糊

　　　0　　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>

示例图片：

　　　　

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>

　　　　　　效果图：

 
 
(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>

　　　　　　示例图片：

　　　　

(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(滤镜)属性的更多相关文章

  1. 巧用 CSS3 filter(滤镜) 属性

    原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...

  2. CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了

    HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  3. filter(滤镜) 属性 内部资料 请勿转载 谢谢合作

    Filter 描述 none 默认值,没有效果. blur(px) 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊 ...

  4. CSS3中的变形处理(transform)属性

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div. ...

  5. css3 filter(滤镜)属性汇总与使用介绍，来源W3C

    实例 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(%); /* Chrome, Safari, Opera */ filter: g ...

  6. CSS3 filter(滤镜) 属性

    filter 属性定义了元素(通常是<img>)的可视效果 语法: object.style.WebkitFilter="grayscale(100%)" 小栗子: 修 ...

  7. 关于CSS3的filter(滤镜) 属性

    修改所有图片或者元素的颜色为黑白 (100% 灰度) DOM{ -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: ...

  8. CSS3中的skew（）属性

    刚开始接触CSS3的2D变换属性,就被这个skew()搞的一头雾水,不知道具体是怎么变化的! 研究了一会才发现,CSS3的斜切坐标系和数学中的坐标系完全不一样(设置斜切原点为左上角) <styl ...

  9. HTML中强大的input标签属性

    用了许久的html,<input>这个标签是最常用的标签之一. <input type="">标签中type属性是必不可少的,以往我最常用的有 type=& ...

随机推荐

  1. Broker节点

    在druid集群环境中 broker节点的作用是查询.它知道metadata 通过zookeeper发送到了集群中的哪个节点,从而能够准确的查询到.broker也把各个节点的结果汇聚到一个节点中.On ...

  2. 在SQL Server中用好模糊查询指令LIKE

    简介:like在sql中的使用 在SQL Server中用好模糊查询指令LIKE 查询是SQL Server中重要的功能,而在查询中将Like用上,可以搜索到一些意想不到的结果和效果,like的神奇之 ...

  3. Extjs6（特别篇）——项目自带例子main.js拆分详解

    本文基于extjs6.0.0 一.拆分代码来看看 1.主页面main是个tab页: 写一些页面的依赖: 标明页面的controller和viewModel Ext.define('Learning.v ...

  4. 使用charles抓取htpps的方法

    自己整理的步骤做个记录 1.下载证书,官方地址:http://www.charlesproxy.com/ssl.zip 可直接点击链接下载:http://charlesproxy.com/getssl ...

  5. 在ABP框架中使用MapTo容易犯的错误

    用自己的话说:MapTo其实就是两个实体间的数据转换.不用像以前那样p.name=p1.name 这样赋值,一旦实体的属性多到十几个以上的时候,这样赋值代码就显得有些臃肿了,如下面: Resource ...

  6. cannot locate symbol "atof" referenced by错误分析

    ndk从r8升级到r10后, 使用eclipse编译出来的so库报错了,加载库的时候报错cannot locate symbol "atof" referenced by 原因:A ...

  7. 线下市场，选择微信小程序从未显得如此重要

    2017 年 1 月 9 日,小程序正式上线,到今日,3 月 8 号,这个新产品面世刚好满两个月.小程序刚推出便受到全球关注,腾讯股价当天即创逾一个月高位,但关注度先是急速上涨,不久便迅速降温,甚至在 ...

  8. java虚拟机总结

    jvm内存模型 u  程序计数器 u  Java栈(虚拟机栈) u  本地方法栈 u  Java堆 u  方法区及其运行时常量池 垃圾回收机制 u  新生代和老年代 u  参数设置 u  垃圾回收(M ...

  9. C语言中的指针

    请先看C++中的指针概述,这里只是扩充 数组指针 其实这里主要说的就是c++中的指针运算 /* 数组元素指针: 一个变量有地址,一个数组包含若干个元素,每个数组元素都有相应的地址, 指针变量可以指向数 ...

  10. 用PHP删除ftp下载导致的文件空行

    使用FTP上传下载文件,如果没有设置传输方式为二进制,可能会导致文件出现空行的情况,例如: 使用PHP对文件的空行进行删除,使用正则: <?php $file = './abc.inc.php' ...