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中的counter和content属性,一些简单的内容显示就不需要JS去实现了

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

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

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

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

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

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

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

  5. CSS3 filter(滤镜) 属性

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

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

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

  7. CSS3中的skew()属性

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

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

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

  9. 总结&#183;CSS3中定位模型之position属性的使用方法

    一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...

随机推荐

  1. 各大互联网公司前端面试题(HTML/CSS)

    Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto ...

  2. css百宝箱

    关于css百宝箱? 在前端学习中,总会遇到零星的知识点,小技巧,这些知识点小到不至于用一片博客写出来,遇到时网上查询一下或许也能搞定,但不一定能记住,所以这篇博客就用来记录那些散落的知识点,积少成多, ...

  3. echarts在360中以及IE8浏览器不兼容:解决方案

    参考:http://blog.csdn.net/www3300300/article/details/12992489 添加: <head> <meta http-equiv=&qu ...

  4. shell 执行jar 的命令

    #!/bin/sh ############## #判断是否程序已启动 jappname='Test' mainclasspath="com.company.commontest.test& ...

  5. [置顶] 让金融互联网-P2P网贷融资量增长10倍的广告宣传公益活动

    我想做一件什么事?一个公益活动,所有资料都会共享出来--- 再次声明:这是一次公益,所有资料会公开. 我正在做一点事:收集各个P2P信贷公司(包括线上线下的),然后给线上P2P信贷公司做营销策略,教他 ...

  6. 从零开始学Xamarin.Forms(三) Android 制作启动画面

    原文:从零开始学Xamarin.Forms(三) Android 制作启动画面     Xamarin.Forms 在启动的时候相当慢,必须添加一个启动界面,步骤如下: 1.将启动画面的图片命名为:s ...

  7. 初学html,任务1:一个简单html页面,要求:内容页面装一篇文章 用html来分段

    这是主要内容部分,用html实现版块分布. 接下来是样式部分. 让页面所有元素的padding和margin都设置为0 : 否则加入一张大的覆盖的背景图片后,会由于浏览器的缘故,图片周边有白边: 设置 ...

  8. K - Popular Cows

    来源poj2186 Every cow's dream is to become the most popular cow in the herd. In a herd of N (1 <= N ...

  9. WebForm - 文本框回车事件

    document.getElementById("Pwd").onkeyup = function (e) { ) { fun_Login(); } };

  10. linux内核分析 第五周 扒开系统调用的三层皮(下)

    rm menu -rf 强制删除原menu文件 git clone http://github.com/mengning/menu.git 从github中克隆 cd menu 在test.c中增加上 ...