码迷,mamicode.com
首页 > Web开发 > 详细

css3中的filter

时间:2015-07-19 16:24:07      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:

在这周的网页中遇见了一个针对我个人而言来说以前不知道的关于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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!