css3中的filter

标签：

在这周的网页中遇见了一个针对我个人而言来说以前不知道的关于css3中的一个新属性，filter。具体是我想让两个背景重叠一部分的情况下，最下层的背景在光感度下呈现出暗色。后面自己通过查询找到了这个filter，并且发现他不止一个属性，有10个。下面就来介绍下我眼中的css3的filter.

filter主要是运用在图片上，以实现一些特效。

其默认值是none，他不具备继承性，其中filter-function一个具有以下值可选：

1. grayscale灰度
2. sepia褐色
3. saturate饱和度
4. hue-rotate色相旋转
5. invert反色
6. opacity透明度
7. brightness亮度
8. contrast对比度
9. blur模糊
10. drop-shadow阴影

1：在这次的网页中我就用了grayscale 。颜色主要在白色和灰色之间）。 

     .grayscale{
          -webkit-filter:grayscale(1);
      } 
2：使用这种效果，你的图片好像很古老的一样
.sepia{

          -webkit-filter:sepia(1);
      } 
3：saturat是用来改变图片的饱和度:

 .saturate{
         -webkit-filter:saturate(0.5);
      } 

4：hue-rotate用来改变图片的色相

 .hue-rotate{
           -webkit-filter:hue-rotate(90deg);
       }
5：invert做出来的效果就像是照相机底面的效果一样

.invert{
            -webkit-filter:invert(1);
        }
6：改变图片的透明度

  .opacity{
        -webkit-filter:opacity(.2);
      }
7：改变图片的亮度

      .brightness{
            -webkit-filter:brightness(.5);
        }
8：改变图片的对比度

 .contrast{
            -webkit-filter:contrast(2);
        }
9：改变图片的清晰度

.blur{
            -webkit-filter:blur(3px);
        }
10：这个很像box-shadow一样的效果，给图片加阴影效果

.drop-shadow{
         -webkit-filter:drop-shadow(5px 5px 5px #ccc);
     }
其中里面还有好几个都还没有接触过，希望自己在后面能够多运用这些属性。给页面带去更好的效果

css3中的filter

标签：

原文地址：http://www.cnblogs.com/w111/p/4658728.html