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. oracle分区表的建立方法(包含已经存在的表要分区)分享，非常好

    非原创 Oracle提供了分区技术以支持VLDB(Very Large DataBase).分区表通过对分区列的判断,把分区列不同的记录,放到不同的分区中.分区完全对应用透明. Oracle的分区表可 ...

  2. struts2之拦截器

    1. 为什么需要拦截器 早期MVC框架将一些通用操作写死在核心控制器中,致使框架灵活性不足.可扩展性降低, Struts 2将核心功能放到多个拦截器中实现,拦截器可自由选择和组合,增强了灵活性,有利于 ...

  3. Linux 系统管理04--账号管理

    Linux系统管理04--账号管理 一.用户账号管理 1.用户账号概述 (1)用户账号的常见分类: 1>超级用户:root uid=0 gid=0 权限最大. 2>普通用户:uid> ...

  4. CSAcademy Beta Round #4 Swap Pairing

    题目链接:https://csacademy.com/contest/arhiva/#task/swap_pairing/ 大意是给2*n个包含n种数字,每种数字出现恰好2次的数列,每一步操作可以交换 ...

  5. 【算法】RMQ LCA 讲课杂记

    4月4日,应学弟要求去了次学校给小同学们讲了一堂课,其实讲的挺内容挺杂的,但是目的是引出LCA算法. 现在整理一下当天讲课的主要内容: 开始并没有直接引出LCA问题,而是讲了RMQ(Range Min ...

  6. jquery分页插件的修改

    前言 最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...

  7. 不须组件的NPOI插件 excel读取

    前提: 需要DLL  1.引用 using NPOI.SS.UserModel; using NPOI.XSSF.UserModel;//用于2007版本 using NPOI.HSSF.UserMo ...

  8. 存储容量和IOPS的关系

    在云计算时代,数据量成几何形式增加,必然会考虑增加存储容量,但是增加存储容量不简单存储性能得到提升,他们之间没有必然的联系: 存储容量,就是指存储设备上能够存储数据的大小,比如,一个磁盘阵列有50T的 ...

  9. cmd第一次推送github

    echo off for %%i in ("%cd%") do set "name=%%~ni" git init git remote add origin ...

  10. 优化UI控件 【译】

    翻译自:https://unity3d.com/cn/learn/tutorials/topics/best-practices/optimizing-ui-controls?playlist=300 ...