這篇文章主要為大家展示了css中filter屬性和backdrop-filter對比有什么區別，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“css中filter屬性和backdrop-filter對比有什么區別”這篇文章吧。
filter和backdrop-filter具有一定區別：
Filter不僅僅作用于當前元素，后代元素也會繼承這個屬性，作用于一個空背景元素則沒有效果。
backdrop-filter 是使透過該層的底部元素模糊化
backdrop-filter屬性可以讓你為一個元素后面區域添加圖形效果（如模糊或顏色偏移）。 因為它適用于元素 背后 的所有元素，為了看到效果，必須使元素或其背景至少部分透明。
backdrop-filter目前兼容性不佳，尤其是安卓移動端。
filter屬性
我們先來說說filter屬性，css3中的filter屬性簡單易用且強大，這些效果作用在圖片上可以實現一些特有的特效。而且目前主流瀏覽器都已經支持了這個屬性。
從上圖來看，大部分瀏覽器的兼容性都是不錯的。
我們還是直接用代碼來看。
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>
我們定義一張照片在網頁中央，先不做任何處理。
這是原圖呈現的效果。
接下來我們看filter的幾個比較重要的屬性。
opacity
opacity 代表透明度，值為0-1之間的小數，值越大透明度越低。
.filter{
filter: opacity(.3);
}如下圖展示：
blur
blur可以設置圖片使用高斯模糊效果，單位值是px。所謂高斯模糊，就是指一個圖像與二維高斯分布的概率密度函數做卷積。
簡單點說：高斯模糊常常用來模擬人眼中的物體變遠、變快的效果。在照片處理中，我們常常將背景施以高斯模糊，使得背景仿佛變遠了，從而突出前景的人物或物體。一些所謂“先拍照，后對焦”的技術利用的也是高斯模糊這個效果。若想弄出視點飛快移動的效果，也可以對背景使用高斯模糊。
.filter {
filter: blur(2px);
}
invert
invert 可以設定反色， 值為0-1之間的小數。
.filter {
filter: invert(1);
}
saturate
saturate可以設定照片飽和度，取值范圍為數字即可，默認值1，即100%。
.filter {
filter: saturate(5);
}比如這里我設置飽和度是500%，如下圖效果：
grayscale
grayscale代表灰度，取值在0-1之間,。
.filter {
filter: grayscale(1);
}下圖是grayscale為1，即灰度是100%時候的效果。
另外，如果使用該效果參數里沒值的話，也會默認以1，即100%為值取值，即如下面設置。
.filter {
filter: grayscale();
}sepia
sepia代表的是照片褐色，類似于大部分美圖軟件里的懷舊功能的那種效果，取值也是0-1，和grayscale一樣。
.filter {
filter: sepia(1);
}hue-rotate
hue-rotate用來改變圖片的色相，默認值為0deg，取值是角度（angle）。
.filter {
filter: hue-rotate(90deg);
}
hue-rotate一般配合css動畫使用，可以呈現不一樣效果。比如電池充電的動畫，隨著高度在縱坐標上移，hue-rotate的值逐漸改變，這里因為無法上傳git圖片，只能看下靜態圖片：
brightness
brightness可以改變圖片的亮度，默認值為100%,即1。
.filter {
filter: brightness(2);
}
contrast
contrast代表對比度，這個屬性取值和飽和度saturate類似，取值也是數字。
.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屬性可以讓你為一個元素后面區域添加圖形效果（如模糊或顏色偏移）。 因為它適用于元素 背后 的所有元素，為了看到效果，必須使元素或其背景至少部分透明。
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)。如下圖展示效果，我們發現filter元素div和其中的文字內容，都被模糊化了。
但如果如下修改樣式
.filter {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
backdrop-filter: blur(5px);
z-index: 20;
font-size: 32px;
}使用backdrop-filter: blur(5px)元素，則得到如下圖排版
我們發現，只有filter元素DIV被模糊化，而子內容文字并沒有受到任何影響。
.filter {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background-color: chocolate;
backdrop-filter: blur(5px);
z-index: 20;
font-size: 32px;
}但是，如果按照以上代碼，給filter元素設置了背景色background-color: chocolate，這時候，就幾乎看不到模糊化的效果。
或者，我們把content元素DIV背景色去除，
.content {
position: absolute;
bottom: 40%;
width: 300px;
height: 300px;
}
這就是為什么說，為了看到效果，必須使元素或其背景至少部分透明。
我們發現，backdrop-filter屬性還只能在部分最新版瀏覽器上有效果，所以目前來看，此屬性的兼容性較差。
以上就是關于“css中filter屬性和backdrop-filter對比有什么區別”的內容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關知識內容，請多多關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
