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. 使用NPOI写入Excel数据(ASP.NET)

    第一次做这个写入数据的功能,研究了下npoi的类 IWorkbook wb = new HSSFWorkbook(); //创建表 ISheet sh = wb.CreateSheet("X ...

  2. 光场相机重聚焦之三——Matlab光场工具包使用、重聚焦及多视角效果展示

    这一小节说一下Matlab光场工具包的使用,展示重聚焦和多视角的效果. 从Lytro illum中导出的raw数据为.lfp格式的光场图像文件(约52M大小),该文件包含以下几部分:光场图像数据raw ...

  3. 【转】JDBC学习笔记(8)——数据库连接池(dbcp&C3P0)

    转自:http://www.cnblogs.com/ysw-go/ JDBC数据库连接池的必要性 一.在使用开发基于数据库的web程序时,传统的模式基本是按一下步骤: 1)在主程序(如servlet/ ...

  4. fuse on TDH4.8

    一.安装依赖包 yum install autoconf.noarch yum install automake yum install libtool* yum install m4 yum ins ...

  5. webrtc学习笔记2(Android端demo代码结构)

    最近正在修改webrtc的Android端demo和服务器交互的内容,介绍一下demo的大体结构吧,以便能快速回忆. 环境:Android5.0以上.libjingle_peerconnection_ ...

  6. win7下安装memcached出现failed to install service or service already installed解决办法

    安装memcached时总是提示“failed to install service or service already installed”,开始以为是版本问题,就下了好几个不同版本,可还是老问题 ...

  7. 为linux系统实现回收站

    在linux系统中,经常采用"rm *"或"rm -r *"操作删除一下文件,但是有时某些文件并不是我们想要删除的,但是已经被删除.很多时候都是悲剧的,数据是难 ...

  8. Windows 10 碎片整理程序使用

    1.打开 此电脑 2.右击任意一个磁盘,这里以C盘为例,点击 属性 3.点击 工具  选项卡--->优化 4.选中其中的一个盘  优化 5.然后静等结束,就好啦. 虽然不知道有什么用,...

  9. python3 selenium 鼠标悬停操作

    使用场景: 测试过程中有些元素隐藏在某些元素下面,需要鼠标悬停,才会看到 使用方法: # 定位元素hover_element = driver.find_element_by_css_selector ...

  10. Jedis连接池使用

    构建redis连接池,返还到连接池 private static JedisPool jedisPool = null; private static Jedis jedis; static { je ...