bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

css中filter屬性和backdrop-filter對比有什么區(qū)別

這篇文章主要為大家展示了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)支持了這個屬性。

css中filter屬性和backdrop-filter對比有什么區(qū)別

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

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

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)頁中央,先不做任何處理。

css中filter屬性和backdrop-filter對比有什么區(qū)別

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

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

opacity

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

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

如下圖展示:

css中filter屬性和backdrop-filter對比有什么區(qū)別

blur

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

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

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

css中filter屬性和backdrop-filter對比有什么區(qū)別

invert

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

.filter {
  filter: invert(1);
}

css中filter屬性和backdrop-filter對比有什么區(qū)別

saturate

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

.filter {
  filter: saturate(5);
}

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

css中filter屬性和backdrop-filter對比有什么區(qū)別

grayscale

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

.filter {
  filter: grayscale(1);
}

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

css中filter屬性和backdrop-filter對比有什么區(qū)別

另外,如果使用該效果參數(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);
}

css中filter屬性和backdrop-filter對比有什么區(qū)別

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

css中filter屬性和backdrop-filter對比有什么區(qū)別

css中filter屬性和backdrop-filter對比有什么區(qū)別

brightness

brightness可以改變圖片的亮度,默認值為100%,即1。

.filter {
   filter: brightness(2);
}

css中filter屬性和backdrop-filter對比有什么區(qū)別

contrast

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

.filter {
  filter: contrast(2.5);
}

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

css中filter屬性和backdrop-filter對比有什么區(qū)別

drop-shadow

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

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

css中filter屬性和backdrop-filter對比有什么區(qū)別

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;
}

以上元素,我們可以得到如下布局:

css中filter屬性和backdrop-filter對比有什么區(qū)別

這時候,我們將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)容,都被模糊化了。

css中filter屬性和backdrop-filter對比有什么區(qū)別

但如果如下修改樣式

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

}

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

css中filter屬性和backdrop-filter對比有什么區(qū)別

我們發(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,這時候,就幾乎看不到模糊化的效果。

css中filter屬性和backdrop-filter對比有什么區(qū)別

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

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

css中filter屬性和backdrop-filter對比有什么區(qū)別

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

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

css中filter屬性和backdrop-filter對比有什么區(qū)別

以上就是關(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)

外貿(mào)網(wǎng)站建設(shè)