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

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调整

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .img{
 6             -webkit-filter:sepia(70%);
 7         }
 8     </style>
 9 </head>
10 <body>
11 <img src="img/boke.png" alt="">
12 <img class="img" src="img/boke.png" alt="">
13 </body>

示例图片:

    

3示例   

    下面,对filter属性的其中几个值做一个示例,其他好玩的东西需要博友们一起发掘,有啥好玩的可以跟我一起分享哟

    

(1)hue-rotate(色彩旋转)

       效果看图吧,具体使用效果要靠大家发掘:

        

 1    <style>
 2         .img{
 3             -webkit-filter:hue-rotate(330deg);
 4         }
 5     </style>
 6 </head>
 7 <body>
 8 <img src="img/boke.png" alt="">
 9 <img class="img" src="img/boke.png" alt="">
10 </body>

      效果图:

(2)blur(模糊)

blur(模糊效果,单位px)    

 1    <style>
 2         .img{
 3             -webkit-filter:blur(1px);
 4         }
 5     </style>
 7 <body>
 8 <img src="img/boke.png" alt="">
 9 <img class="img" src="img/boke.png" alt="">
10 </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>

    示例图片:

    

    好了,今天的分享就到这里了,谢谢大家的观看,其它的效果博主就不一一举例了,如果感兴趣请大家一一探索,也可以跟博主来交流,有什么好的意见建议请给博主留言,谢谢。

时间: 06-04

css3中强大的filter(滤镜)属性的相关文章

css3中的transition渐变过渡属性的认识.

css3新增的属性transition可以让元素产生动画效果: 用法(兼容代码): -webkit-transition:property(属性样式) duration(过渡时间) timing-function过渡模式(5种过渡模式效果) -moz-transition:property(属性样式) duration(过渡时间) timing-function过渡模式(5种过渡模式效果) -o-transition:property(属性样式) duration(过渡时间) timing-fu

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

HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

filter(滤镜) 属性

Filter 描述 none 默认值,没有效果. blur(px) 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊: 如果没有设定值,则默认是0:这个参数可设置css长度值,但不接受百分比值. brightness(%) 给图片应用一种线性乘法,使其看起来更亮或更暗.如果值是0%,图像会全黑.值是100%,则图像无变化.其他的值对应线性乘数效果.值超过100%也是可以的,图像会比原来更亮.如果没有设定值,默认是1. co

关于CSS3的filter(滤镜) 属性

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

CSS3中的skew()属性

刚开始接触CSS3的2D变换属性,就被这个skew()搞的一头雾水,不知道具体是怎么变化的! 研究了一会才发现,CSS3的斜切坐标系和数学中的坐标系完全不一样(设置斜切原点为左上角) <style> div{ width: 200px; height: 200px; transition:all 2s; margin: 150px auto; } .div1{ background-color: #f00; } .div2{ background-color: #0f0; } </sty

css: CSS3 filter(滤镜) 的使用

CSS3 filter(滤镜) 属性 filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度). 定义和使用 默认值 none 继承 no 动画支持 是.详细可查阅 CSS 动画 版本 CSS3 JavaScript 语法 object.style.WebkitFilter="grayscale(100%)" CSS 语法 filter: none | blur() | brightness() | contrast() | drop-shadow() | graysca

css3中弹性盒子模型都有那些属性

<div class="father"> <div class="son0"></div> <div class="son2"></div> <div class="son3"></div> </div> 以上面的div结构为例:使用css3中的box的一些属性可以改变框内子元素的宽 高自适应,还可以改变子元素出现的顺序 1.box

css3中的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例 正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p

CSS3中的弹性流体盒模型技术详解(一)

从这篇文章开始,会利用几个篇幅,我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的(当然,所指的范畴是利用CSS技术). 由于盒子模型技术内容比较多,这篇文章我将着重讲解知识点. 下一篇文章,我会带领大家开发一个兼容 pc端浏览器和 移动端浏览器的弹性布局web界面的实例.希望大家能从中领受到CSS3在布局方面的强大功能. 好了,长话短说,现在开始我们的<CSS3中的弹性流体盒模型技术详解>之旅吧! 在讲解CSS3中新增的弹性布局属性之前,我们先回顾一下CSS1 和 CSS2中都已经定