淘先锋技术网

首页 1 2 3 4 5 6 7

filter 属性定义了元素(通常是<img>)的可视效果,例如图片的模糊、饱和度、灰度等……个人感觉功能很强大

1、filter的语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

2、各大浏览器当前时间的支持情况(来自Can I use:http://caniuse.com/)

可以看到IE8,9,10,11、OPera Mini所有、以及Android Broswer4.3当前都是不支持

3、filter各函数

1)模糊效果blur(px)函数

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
  <style>
    div{width: 480px;height: 300px;margin: 100px auto;}
    div>img{
      filter: blur(1px);
      -webkit-filter: blur(1px); 
      }
  </style>
</head>
<body>
  <div>
    <img src="img/test.jpg" height="300" width="480"/>
  </div>
</body>
</html>

原图(Top)与效果图(Bottom):

  

   

2)使图片变量brightness(%)函数

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
  <style>
    div{width: 480px;height: 300px;margin: 100px auto;}
    div>img{
      filter: brightness(150%);
      -webkit-filter: brightness(150%); 
        }
  </style>
</head>
<body>
  <div>
    <img src="img/test.jpg" height="300" width="480"/>
  </div>
</body>
</html>

原图(Top)与效果图(Bottom):

  

  

4)调整图像对比度Contrast(%)函数

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
  <style>
    div{width: 480px;height: 300px;margin: 100px auto;}
    div>img{
      filter: Contrast(200%);
      -webkit-filter: Contrast(200%); 
        }
  </style>
</head>
<body>
  <div>
    <img src="img/test.jpg" height="300" width="480"/>
  </div>
</body>
</html>

原图(Top)和效果图(Bottom):

  

  

4)阴影效果drop-shadow(px,px,px,px)

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
  <style>
    div{width: 480px;height: 300px;margin: 100px auto;}
    div>img{
      filter: drop-shadow(8px 8px 6px red);
      
      -webkit-filter: drop-shadow(8px 8px 6px red); 
      }
  </style>
</head>
<body>
  <div>
    <img src="img/test.jpg" height="300" width="480"/>
  </div>
</body>
</html>

原图(Top)和效果图(Bottom):

  

5)将图像转换为灰度图像Grayscale(%)

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
  <style>
    div{width: 480px;height: 300px;margin: 100px auto;}
    div>img{
      filter:grayscale(60%);
      -webkit-filter: grayscale(60%); 
        }
  </style>
</head>
<body>
  <div>
    <img src="img/test.jpg" height="300" width="480"/>
  </div>
</body>
</html>

原图(Top)和效果图(Bottom):

 

 

6)色相旋转hue-rotate(deg)

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
  <style>
    div{width: 480px;height: 300px;margin: 100px auto;}
    div>img{
      filter:hue-rotate(30deg);
      -webkit-filter: hue-rotate(30deg); 
        }
  </style>
</head>
<body>
  <div>
    <img src="img/test.jpg" height="300" width="480"/>
  </div>
</body>
</html>

原图(Top)和效果图(Bottom):

7)反转输入图像

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
  <style>
    div{width: 480px;height: 300px;margin: 100px auto;}
    div>img{
      filter:invert(100%);
      -webkit-filter: invert(100%); 
        }
  </style>
</head>
<body>
  <div>
    <img src="img/test.jpg" height="300" width="480"/>
  </div>
</body>
</html>

原图(Top)和效果图(Bottom):

8)改变图像的透明度

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
  <style>
    div{width: 480px;height: 300px;margin: 100px auto;}
    div>img{
      filter:opacity(50%);
      -webkit-filter: opacity(50%); 
        }
  </style>
</head>
<body>
  <div>
    <img src="img/test.jpg" height="300" width="480"/>
  </div>
</body>
</html>

原图(Top)和效果图(Bottom)

9)饱和度设置saturate(%)

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
  <style>
    div{width: 480px;height: 300px;margin: 100px auto;}
    div>img{
      filter:saturate(500%);
      -webkit-filter:saturate(500%); 
}
</style>
</head>
<body>
    <div>
      <img src="img/test.jpg" height="300" width="480"/>
    </div>
</body>
</html>

原图(Top)和效果图(Bottom)

10)将图像转换为深褐色sepia(80%)

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
  <style>
    div{width: 480px;height: 300px;margin: 100px auto;}
    div>img{
      filter:sepia(80%);
      -webkit-filter:sepia(80%); 
}
</style>
</head>
<body>
    <div>
      <img src="img/test.jpg" height="300" width="480"/>
    </div>
</body>
</html>

原图(Top)和效果图(Bottom)

 

11)URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素  url()

filter: url(svg-url#element-id)

12)复合函数使用多个滤镜,每个滤镜使用空格分隔。注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
   <style>
    div{width: 480px;height: 300px;margin: 100px auto;}
    div>img{
      -webkit-filter: contrast(200%) brightness(150%); 
      filter: contrast(200%) brightness(150%);
}
</style>
</head>
<body>
    <div>
  <img src="img/test.jpg" height="300" width="480"/>
    </div>
</body>
</html>

原图(Top)和效果图(Bottom)

13)其他

initial:设置属性为默认值

inherit:从父元素继承该属性

本文系作者原创,转载请注明出处,感谢合作!文章难免会有不足之处,如有纰漏,非常感谢您的指出,您可追加评论或者QQ留言。


更多专业前端知识,请上 【猿2048】www.mk2048.com