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教程