這篇文章主要為大家展示了css中filter屬性和backdrop-filter對比有什么區(qū)別,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶大家一起來研究并學習一下“css中filter屬性和backdrop-filter對比有什么區(qū)別”這篇文章吧。
創(chuàng)新互聯(lián)堅持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的瓊中黎族網(wǎng)站設(shè)計、移動媒體設(shè)計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
filter和backdrop-filter具有一定區(qū)別:
Filter不僅僅作用于當前元素,后代元素也會繼承這個屬性,作用于一個空背景元素則沒有效果。
backdrop-filter 是使透過該層的底部元素模糊化
backdrop-filter屬性可以讓你為一個元素后面區(qū)域添加圖形效果(如模糊或顏色偏移)。 因為它適用于元素 背后 的所有元素,為了看到效果,必須使元素或其背景至少部分透明。
backdrop-filter目前兼容性不佳,尤其是安卓移動端。
filter屬性
我們先來說說filter屬性,css3中的filter屬性簡單易用且強大,這些效果作用在圖片上可以實現(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ù)做卷積。
簡單點說:高斯模糊常常用來模擬人眼中的物體變遠、變快的效果。在照片處理中,我們常常將背景施以高斯模糊,使得背景仿佛變遠了,從而突出前景的人物或物體。一些所謂“先拍照,后對焦”的技術(shù)利用的也是高斯模糊這個效果。若想弄出視點飛快移動的效果,也可以對背景使用高斯模糊。
.filter { filter: blur(2px); }
invert
invert 可以設(shè)定反色, 值為0-1之間的小數(shù)。
.filter { filter: invert(1); }
saturate
saturate可以設(shè)定照片飽和度,取值范圍為數(shù)字即可,默認值1,即100%。
.filter { filter: saturate(5); }
比如這里我設(shè)置飽和度是500%,如下圖效果:
grayscale
grayscale代表灰度,取值在0-1之間,。
.filter { filter: grayscale(1); }
下圖是grayscale為1,即灰度是100%時候的效果。
另外,如果使用該效果參數(shù)里沒值的話,也會默認以1,即100%為值取值,即如下面設(shè)置。
.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動畫使用,可以呈現(xiàn)不一樣效果。比如電池充電的動畫,隨著高度在縱坐標上移,hue-rotate的值逐漸改變,這里因為無法上傳git圖片,只能看下靜態(tài)圖片:
brightness
brightness可以改變圖片的亮度,默認值為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對比有什么區(qū)別”的內(nèi)容,如果改文章對你有所幫助并覺得寫得不錯,勞請分享給你的好友一起學習新知識,若想了解更多相關(guān)知識內(nèi)容,請多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
新聞名稱:css中filter屬性和backdrop-filter對比有什么區(qū)別
文章分享:http://vcdvsql.cn/article20/jhidco.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站制作、營銷型網(wǎng)站建設(shè)、網(wǎng)站導航、網(wǎng)站建設(shè)、虛擬主機
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)