前端 -- 頁面濾鏡效果及高斯模糊效果

MR_LP發表於2017-03-23
前端

請各位讀者新增一下作者的微信公眾號，以後有新的文章，將在微信公眾號直接推送給各位，非常感謝。

前端 -- 頁面濾鏡效果及高斯模糊效果

0.前言

注意：
若文章中發現圖片無法載入，請移步作者其他部落格。

最近在用手機的過程中，發現蘋果在非常多的地方都使用了模糊的效果。

高斯效果雖然炫酷，可是我們們身為前端人員，又該如何去模仿這個效果呢？

這時候我們就要說到 CSS 3 中的一個屬性，Filter 了。

1.Filter

CSS濾鏡（filter）：
提供的圖形特效，像模糊，銳化或元素變色。
過濾器通常被用於調整圖片，背景和邊界的渲染。

Filter 的一些基礎內容：

名稱 說明
初始值 none
適用元素 所有元素;在SVG,它適用於容器元素不包括def元素和所有圖形元素
繼承性 不繼承
適用效果 視覺處理
增添版本 CSS3
JS 語法 object.style.WebkitFilter="grayscale(100%)"

關於適用瀏覽器版本：

前端 -- 頁面濾鏡效果及高斯模糊效果

平時推薦大家還是用 Chrome 瀏覽器來檢視效果吧。

除此之外，再補充一下在 MDN 上給出的相容性說明。

前端 -- 頁面濾鏡效果及高斯模糊效果

前端 -- 頁面濾鏡效果及高斯模糊效果

出自之外，Filter 雖然在屬性介紹中說明是不繼承的，但是它其實和 Opacity 非常類似，都會導致子級發生問題。

這時候我們就要用到另外一個內容，Filter（） 函式了。

但是，我們們還是循序漸進，先繼續來看 Filter 吧。

在介紹了 Filter 的基礎使用之後，我們接下來介紹一下它的屬性。

屬性名 屬性介紹 填寫方式
none 無效果 預設值
grayscale 灰度 百分比
sepia 褐色 百分比
saturate 飽和度 百分比
hue-rotate 色相旋轉 deg
invert 反色 百分比
opacity 透明度 百分比
brightness 亮度 百分比
contrast 對比度 百分比
blur 模糊 px
drop-shadow 陰影 h-shadow v-shadow blur spread color

既然知道了都有哪些屬性，那麼我們接下來就來一起看看。

這些屬性都是如何去使用的吧。

2.屬性的書寫

2.1 grayscale ：灰度

示例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鵬 --> QQ:3206064928</title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:grayscale(1);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        grayscale ：灰度
    </h3>
</body>
</html>複製程式碼

實現效果：

前端 -- 頁面濾鏡效果及高斯模糊效果

解釋說明：

灰度會將我們的照片進行灰白處理，其實說白了就是由原本的彩色照片變成 黑白照片而已。

需要注意：

  • 值為100%則完全轉為灰度影像，值為0%影像無變化。
  • 值在0%到100%之間，則是效果的線性乘子。
  • 若未設定，W3C說值預設是0，但是實際測試應為 100%。

2.2 sepia ： 褐色

示例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鵬 --> QQ:3206064928</title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:sepia(1);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        sepia ： 褐色
    </h3>
</body>
</html>複製程式碼

實現效果：

前端 -- 頁面濾鏡效果及高斯模糊效果

解釋說明：

sepia 是將影像轉換為深褐色。

處理過後能實現一種類似於“老照片”的泛黃感覺。

除此之外，需要注意：

  • 值為100%則完全是深褐色的，值為0%影像無變化。
  • 值在0%到100%之間，則是效果的線性乘子。
  • 若未設定，W3C說值預設是0，但是實際測試應為 100%。

2.3 saturate ：飽和度

示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鵬 --> QQ:3206064928</title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:saturate(4);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        saturate ：飽和度
    </h3>
</body>
</html>複製程式碼

實現效果：

前端 -- 頁面濾鏡效果及高斯模糊效果

解釋說明：

saturate 是用於轉換影像飽和度。

雖然轉換成 0 的話，看上去實現效果和“灰度”差不多。

但是飽和度是可以設定超過原本圖片色彩的。

除此之外，需要注意：

  • 值為0%則是完全不飽和，值為100%則影像無變化。
  • 其他值，則是效果的線性乘子。
  • 超過100%的值是允許的，則有更高的飽和度。
  • 若值未設定，值預設是1。

2.4 hue-rotate ：色相旋轉

示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鵬 --> QQ:3206064928</title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:hue-rotate(90deg);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        hue-rotate ：色相旋轉
    </h3>
</body>
</html>複製程式碼

實現效果：

前端 -- 頁面濾鏡效果及高斯模糊效果

解釋說明：

hue-rotate 是給影像應用色相旋轉。

數值設定影像會被調整的色環角度值。

注意：

  • 值為0deg，則影像無變化。
  • 若值未設定，預設值是0deg。
  • 該值雖然沒有最大值，超過360deg的值相當於又繞一圈。

2.5 invert ：反色

示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鵬 --> QQ:3206064928</title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:invert(1);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        invert ：反色
    </h3>
</body>
</html>複製程式碼

實現效果：

前端 -- 頁面濾鏡效果及高斯模糊效果

解釋說明：

invert 是反轉輸入影像。

就像我們照相機的底片一樣。

注意：

  • 100%的價值是完全反轉。
  • 值為0%則影像無變化。
  • 值在0%和100%之間，則是效果的線性乘子。
  • 若值未設定，值預設是0。

2.6 透明度

示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鵬 --> QQ:3206064928</title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:opacity(.2);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        opacity ：透明度
    </h3>
</body>
</html>複製程式碼

實現效果：

前端 -- 頁面濾鏡效果及高斯模糊效果

解釋說明：

opacity 是轉化影像的透明程度。

注意：

  • 值為0%則是完全透明，值為100%則影像無變化。
  • 值在0%和100%之間，則是效果的線性乘子，也相當於影像樣本乘以數量。
  • 若值未設定，值預設是1。
  • 該函式與已有的opacity屬性很相似，不同之處在於通過filter，一些瀏覽器為了提升效能會提供硬體加速。

2.7 亮度

示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鵬 --> QQ:3206064928</title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:brightness(2);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        brightness ：亮度
    </h3>
</body>
</html>複製程式碼

實現效果：

前端 -- 頁面濾鏡效果及高斯模糊效果

解釋說明：

brightness 是給圖片應用一種線性乘法，使其看起來更亮或更暗。

注意：

  • 如果值是0%，影像會全黑。值是100%，則影像無變化。
  • 其他的值對應線性乘數效果。
  • 值超過100%也是可以的，影像會比原來更亮。
  • 如果沒有設定值，預設是1。

2.8 contrast ：對比度

示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鵬 --> QQ:3206064928</title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:contrast(2);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        contrast ：對比度
    </h3>
</body>
</html>複製程式碼

實現效果：

前端 -- 頁面濾鏡效果及高斯模糊效果

解釋說明：

contrast 是調整影像的對比度。

注意：

  • 值是0%的話，影像會全黑。
  • 值是100%，影像不變。
  • 值可以超過100%，意味著會運用更低的對比。
  • 若沒有設定值，預設是1。

2.9 blur ：模糊

示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鵬 --> QQ:3206064928</title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:blur(2px);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        blur ：模糊
    </h3>
</body>
</html>複製程式碼

實現效果：

前端 -- 頁面濾鏡效果及高斯模糊效果

解釋說明：

終於到重頭戲了，模糊。

blur 是給影像設定高斯模糊。

"radius"一值設定高斯函式的標準差，或者是螢幕上以多少畫素融在一起， 所以值越大越模糊；

注意：

  • 如果沒有設定值，則預設是0；
  • 這個引數可設定css長度值，但不接受百分比值。

2.10 drop-shadow ：陰影

示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鵬 --> QQ:3206064928</title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:drop-shadow(5px 5px 5px #ccc);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        drop-shadow ：陰影
    </h3>
</body>
</html>複製程式碼

實現效果：

前端 -- 頁面濾鏡效果及高斯模糊效果

解釋說明：

drop-shadow 是給影像設定一個陰影效果。

陰影是合成在影像下面，可以有模糊度的，可以以特定顏色畫出的遮罩圖的偏移版本。

函式接受(在CSS3背景中定義)型別的值，

除了"inset"關鍵字是不允許的。

該函式與已有的box-shadow box-shadow屬性很相似；

不同之處在於，通過濾鏡，一些瀏覽器為了更好的效能會提供硬體加速。

在這裡帶著大家回顧一下之前 box-shadow 的屬性說明：

  • (必須)
    • 這是設定陰影偏移量的兩個 值. 設定水平方向距離. 負值會使陰影出現在元素左邊. 設定垂直距離.負值會使陰影出現在元素上方。檢視可能的單位.
      如果兩個值都是0, 則陰影出現在元素正後面 (如果設定了 and/or ，會有模糊效果).
  • (可選)
    • 這是第三個code>值. 值越大，越模糊，則陰影會變得更大更淡.不允許負值 若未設定，預設是0 (則陰影的邊界很銳利).
  • (可選)
    • 這是第四個 值. 正值會使陰影擴張和變大，負值會是陰影縮小.若未設定，預設是0 (陰影會與元素一樣大小).
      注意: Webkit, 以及一些其他瀏覽器 不支援第四個長度，如果加了也不會渲染。
  • (可選)
    • 檢視 該值可能的關鍵字和標記。若未設定，顏色值基於瀏覽器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 會應用colorcolor屬性的值。另外, 如果顏色值省略，WebKit中陰影是透明的。

2.11 URL ：自定義 XML 檔案

解釋說明：

URL函式接受一個XML檔案，該檔案設定了 一個SVG濾鏡，且可以包含一個錨點來指定一個具體的濾鏡元素.

引入方法：

.target { filter: url(#c1); }

.mydiv { filter: url(commonfilters.xml#large-blur) }複製程式碼

2.12 複合寫法

示例程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>李鵬 --> QQ:3206064928</title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:contrast(175%) brightness(70%);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        你可以組合任意數量的函式來控制渲染。下面的例子可以增強影像的對比度和亮度。
    </h3>
</body>
</html>複製程式碼

實現效果：

前端 -- 頁面濾鏡效果及高斯模糊效果

解釋說明：

你可以組合任意數量的函式來控制渲染。

例如同時去增強影像的對比度和亮度等等。

3. Filter （） 函式

以下部分內容出自 W3Plus。

很多時候，只是希望元素的背景做效果調整，又不希望他會影響其他元素。
而且又沒有backdrop-filter屬性的情形之下，filter()就顯得格外的重要。
在繼續往下閱讀之前，你要注意一點，filter()並不等於以前介紹過的filter屬性。
簡單的理解，一個是函式，一個是屬性。那麼我們今天要說的是filter()函式。

為了能更好的與filter屬性區分，filter()函式接受兩個引數：

filter(<url>, <filter-function-list>)複製程式碼

其中是指一個影像，是一個過濾器。

這兩者結合在一起將會返回一個處理過的新影像。

例如：

.element {
    background: filter(url(path/to/img.jpg), blur(5px)); 
}複製程式碼

因此，你可以給圖片使用過濾效果，然後填充到元素中，比如background-filter、background-opacity、background-blur等等。

前端 -- 頁面濾鏡效果及高斯模糊效果

####注意：

  • 規範中定義的過濾函式
  • 和background-size屬性一起使用會有Bug
  • 支援動畫
  • 需要新增字首：-webkit-filter()

值得一提的是，backdrop-filter和filter()可以使用CSS3 transition和animation實現一些圓滑的過度效果或動畫，甚至還可以使用JavaScript。

前端 -- 頁面濾鏡效果及高斯模糊效果

4. 後記

終於寫完了，用時 5 個小時。

其中查詢資料就花費了大量的事件。

但是最後還是能夠完成，傳送給大家，同時也希望大家能夠在未來用到的時候能夠記得看過這篇文章。

好啦，我也要去吃飯啦，拜拜了您嘞！

本文作者 ： 李鵬

QQ ：3206064928

微信：lipeng_0524

歡迎騷擾。

本文請勿隨意轉載，作者保留法律追究權利。

相關文章