css中filter屬性和backdrop-filter的應(yīng)用與區(qū)別詳解

發(fā)布時間：2020-09-14 16:26:38 作者：Coding貓

這篇文章主要介紹了css中filter屬性和backdrop-filter的應(yīng)用與區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

filter和backdrop-filter具有一定區(qū)別：

Filter不僅僅作用于當(dāng)前元素，后代元素也會繼承這個屬性，作用于一個空背景元素則沒有效果。
backdrop-filter 是使透過該層的底部元素模糊化
backdrop-filter屬性可以讓你為一個元素后面區(qū)域添加圖形效果（如模糊或顏色偏移）。因為它適用于元素背后的所有元素，為了看到效果，必須使元素或其背景至少部分透明。
backdrop-filter目前兼容性不佳，尤其是安卓移動端。

filter屬性

我們先來說說filter屬性，css3中的filter屬性簡單易用且強(qiáng)大，這些效果作用在圖片上可以實現(xiàn)一些特有的特效。而且目前主流瀏覽器都已經(jīng)支持了這個屬性。

從上圖來看，大部分瀏覽器的兼容性都是不錯的。

我們還是直接用代碼來看。

body {
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.img {
  width: 500px;
  height: 500px;
}

<body>
    <img src="./img/kyoto.jpg" class="img filter">
</body>

我們定義一張照片在網(wǎng)頁中央，先不做任何處理。

這是原圖呈現(xiàn)的效果。

接下來我們看filter的幾個比較重要的屬性。

opacity

opacity 代表透明度，值為0-1之間的小數(shù)，值越大透明度越低。

.filter{
  filter: opacity(.3);
}

如下圖展示：

blur

blur可以設(shè)置圖片使用高斯模糊效果，單位值是px。所謂高斯模糊，就是指一個圖像與二維高斯分布的概率密度函數(shù)做卷積。

簡單點說：高斯模糊常常用來模擬人眼中的物體變遠(yuǎn)、變快的效果。在照片處理中，我們常常將背景施以高斯模糊，使得背景仿佛變遠(yuǎn)了，從而突出前景的人物或物體。一些所謂“先拍照，后對焦”的技術(shù)利用的也是高斯模糊這個效果。若想弄出視點飛快移動的效果，也可以對背景使用高斯模糊。

.filter {
  filter: blur(2px);
}

invert

invert 可以設(shè)定反色，值為0-1之間的小數(shù)。

.filter {
  filter: invert(1);
}

saturate

saturate可以設(shè)定照片飽和度，取值范圍為數(shù)字即可，默認(rèn)值1，即100%。

.filter {
  filter: saturate(5);
}

比如這里我設(shè)置飽和度是500%，如下圖效果：

grayscale

grayscale代表灰度，取值在0-1之間,。

.filter {
  filter: grayscale(1);
}

下圖是grayscale為1，即灰度是100%時候的效果。

另外，如果使用該效果參數(shù)里沒值的話，也會默認(rèn)以1，即100%為值取值，即如下面設(shè)置。

.filter {
  filter: grayscale();
}

sepia

sepia代表的是照片褐色，類似于大部分美圖軟件里的懷舊功能的那種效果，取值也是0-1，和grayscale一樣。

.filter {
  filter: sepia(1);
}

hue-rotate

hue-rotate用來改變圖片的色相，默認(rèn)值為0deg，取值是角度（angle）。

.filter {
  filter: hue-rotate(90deg);
}

hue-rotate一般配合css動畫使用，可以呈現(xiàn)不一樣效果。比如電池充電的動畫，隨著高度在縱坐標(biāo)上移，hue-rotate的值逐漸改變，這里因為無法上傳git圖片，只能看下靜態(tài)圖片：

brightness

brightness可以改變圖片的亮度，默認(rèn)值為100%,即1。

.filter {
   filter: brightness(2);
}

contrast

contrast代表對比度，這個屬性取值和飽和度saturate類似，取值也是數(shù)字。

.filter {
  filter: contrast(2.5);
}

這里我們演示對比度是250%時候的效果，如下圖：

drop-shadow

drop-shadow這個屬性類似于box-shadow，給圖片加陰影。

.filter {
  filter: drop-shadow(20px 20px 10px 20px #000) /**水平陰影位置，垂直陰影位置，模糊距離，陰影顏色**/
}

backdrop-filter屬性

我們回過頭來在看backdrop-filter屬性以下幾點特點

backdrop-filter 是使透過該層的底部元素模糊化
backdrop-filter屬性可以讓你為一個元素后面區(qū)域添加圖形效果（如模糊或顏色偏移）。因為它適用于元素背后的所有元素，為了看到效果，必須使元素或其背景至少部分透明。
backdrop-filter目前兼容性不佳，尤其是安卓移動端。

上面這些只看文字不好理解，我直接上代碼：

<div class="container">
  <div class="content"></div>
  <div class="filter">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus voluptatem velit quod placeat?
    Cupiditate,
    corporis, et tempore laudantium consequatur labore distinctio nisi inventore totam vero cum est saepe quos
    ad
  </div>
</div>

我們定義了一個container元素div，子元素有content和filter兩個div元素。

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: aqua;
}

.content {
  position: absolute;
  bottom: 40%;
  width: 300px;
  height: 300px;
  background-color: blueviolet;
}

.filter {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  font-size: 32px;
  z-index: 20;
}

以上元素，我們可以得到如下布局：

這時候，我們將filter元素改為

.filter {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  filter: blur(5px);
  z-index: 20;
  font-size: 32px;
}

從代碼看，我們添加了filter: blur(5px)。如下圖展示效果，我們發(fā)現(xiàn)filter元素div和其中的文字內(nèi)容，都被模糊化了。

但如果如下修改樣式

.filter {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  backdrop-filter: blur(5px);
  z-index: 20;
  font-size: 32px;

}

使用backdrop-filter: blur(5px)元素，則得到如下圖排版

我們發(fā)現(xiàn)，只有filter元素DIV被模糊化，而子內(nèi)容文字并沒有受到任何影響。

.filter {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  background-color: chocolate;
  backdrop-filter: blur(5px);
  z-index: 20;
  font-size: 32px;

}

但是，如果按照以上代碼，給filter元素設(shè)置了背景色background-color: chocolate，這時候，就幾乎看不到模糊化的效果。

或者，我們把content元素DIV背景色去除，

.content {
  position: absolute;
  bottom: 40%;
  width: 300px;
  height: 300px;
}

這就是為什么說，為了看到效果，必須使元素或其背景至少部分透明。

我們發(fā)現(xiàn)，backdrop-filter屬性還只能在部分最新版瀏覽器上有效果，所以目前來看，此屬性的兼容性較差。

到此這篇關(guān)于css中filter屬性和backdrop-filter的應(yīng)用與區(qū)別詳解的文章就介紹到這了,更多相關(guān)css filter和backdrop-filter內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！