CSS3滤镜(filter)--CSS3技术

时间  2019-11-12
标签 css3 css filter 技术 栏目 CSS 繁體版
原文   原文链接

filter 属性定义了元素(一般是<img>)的可视效果，例如图片的模糊、饱和度、灰度等……我的感受功能很强大

一、filter的语法

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

二、各大浏览器当前时间的支持状况（来自Can I use：http://caniuse.com/）

能够看到IE8,9,10,十一、OPera Mini全部、以及Android Broswer4.3当前都是不支持

三、filter各函数

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

<!DOCTYPE html>
<html lang="en">
<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); /*Chrome、Opera、Safari*/
　　　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<img src="img/test.jpg" height="300" width="480"/>
　　</div>
</body>
</html>

原图（Top）与效果图（Bottom）：

  

   

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter: brightness(150%);/*亮度是原图的1.5倍，也能够是1.5，100%为原图*/
　　　　　　-webkit-filter: brightness(150%); /*Chrome、Opera、Safari*/
　　　　　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<img src="img/test.jpg" height="300" width="480"/>
　　</div>
</body>
</html>

原图（Top）与效果图（Bottom）：

  

  

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter: Contrast(200%);/*对比度是原图的2倍，也能够写2；100%为原图，能够超过100%,设置更低的分辨率*/
　　　　　　-webkit-filter: Contrast(200%); /*Chrome、Opera、Safari*/
　　　　　　　　}
　　</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 lang="en">
<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); /*Chrome、Opera、Safari*/
　　　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<img src="img/test.jpg" height="300" width="480"/>
　　</div>
</body>
</html>

原图（Top）和效果图（Bottom）：

  

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter:grayscale(60%);/*范围是0%~100%*/
　　　　　　-webkit-filter: grayscale(60%); /*Chrome、Opera、Safari*/
　　　　　　　　}
　　</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 lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter:hue-rotate(30deg);/*色相旋转度数范围为0deg~360deg，0度为原图，360deg至关于转了一圈又转回0deg*/
　　　　　　-webkit-filter: hue-rotate(30deg); /*Chrome、Opera、Safari*/
　　　　　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<img src="img/test.jpg" height="300" width="480"/>
　　</div>
</body>
</html>

原图（Top）和效果图（Bottom）：

7）反转输入图像

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter:invert(100%);/*属性值在0%和100%之间，100%为彻底反转，0%则为不反转*/
　　　　　　-webkit-filter: invert(100%); /*Chrome、Opera、Safari*/
　　　　　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<img src="img/test.jpg" height="300" width="480"/>
　　</div>
</body>
</html>

原图（Top）和效果图（Bottom）：

8）改变图像的透明度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter:opacity(50%);/*也能够写0.5，0%表示彻底透明，100%为原图，彻底不透明，取值在0~100%之间*/
　　　　　　-webkit-filter: opacity(50%); /*Chrome、Opera、Safari*/
　　　　　　　　}
　　</style>
</head>
<body>
　　<div>
　　　　<img src="img/test.jpg" height="300" width="480"/>
　　</div>
</body>
</html>

原图（Top）和效果图（Bottom）

9）饱和度设置saturate(%)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter:saturate(500%);/*0%~100%也能够超过100%，0%为彻底不饱和，100%为原图，超过100%饱和度更高*/
　　　　　　-webkit-filter:saturate(500%); /*Chrome、Opera、Safari*/
}
</style>
</head>
<body>
　　　　<div>
　　　　　　<img src="img/test.jpg" height="300" width="480"/>
　　　　</div>
</body>
</html>

原图（Top）和效果图（Bottom）

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　filter:sepia(80%);/*取值在0%~100%之间，不能超过100%,100%彻底深褐色，0%图像没有变化*/
　　　　　　-webkit-filter:sepia(80%); /*Chrome、Opera、Safari*/
}
</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 lang="en">
<head>
<meta charset="UTF-8">
<title></title>
　　　<style>
　　　　div{width: 480px;height: 300px;margin: 100px auto;}
　　　　div>img{
　　　　　　-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */
　　　　　　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留言。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程