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

時間  2019-11-24
標籤 前端 頁面 效果 高斯 模糊 简体版
原文   原文鏈接

請各位讀者添加一下做者的微信公衆號，之後有新的文章，將在微信公衆號直接推送給各位，很是感謝。
javascript

0.前言

注意：
若文章中發現圖片沒法加載，請移步做者其餘博客。css

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

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

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

1.Filter

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

Filter 的一些基礎內容：瀏覽器

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

關於適用瀏覽器版本：微信

平時推薦你們仍是用 Chrome 瀏覽器來查看效果吧。ide

除此以外，再補充一下在 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

歡迎騷擾。

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程