up
down
Close
架站盒子
Web Development Box
 

CSS 背景模糊(失焦效果)backdrop-filter

│ 5791 Views │ CSS
CSS 背景模糊(失焦效果)backdrop-filter
CSS 背景模糊(失焦效果)backdrop-filter
  1. 範例
  2. 實際操作
  3. 瀏覽器兼容問題
  4. 其他值
    1. brightness:亮度
    2. contrast:對比
    3. grayscale:灰階
    4. hue-rotate:色相旋轉
    5. invert:負片
    6. sepia :懷舊
    7. saturate:飽和
    8. drop-shadow:下拉陰影
  5. 混合應用

有時候我們想放一張背景圖,但是又不希望背景圖太過搶眼,這時候除了可以在背景上加上半透明底色的內框之外,還可以對這個內框做模糊效果,這樣就能讓文字變得清晰,又不顯單調。

範例


div {
backdrop-filter:blur(5px);
}

backdrop意思是背景,filter是濾鏡,背景濾鏡有很多個值可以用,其中一個是blur,表示模糊,後面的數值是模糊程度。

實際操作

沒有模糊效果

See the Pen no-backdrop-filter CSS by kumo (@kumo-tw) on CodePen.

有模糊效果

See the Pen backdrop-filter CSS by kumo (@kumo-tw) on CodePen.

瀏覽器兼容問題

值得注意的是,目前 safari 並無支援此項用法,因此在 safari 瀏覽器上看並不會有模糊效果,請再加上-webkit-backdrop-filter:blur(5px);

如果不知道-webkit-是什麼,請參考:CSS -webkit-、-moz-、-o-的意思(瀏覽器兼容)

其他值

除了模糊效果之外,還有很多其他效果,以下列出backdrop-filter所有效果。

  • blur:模糊
  • brightness:亮度
  • contrast:對比
  • grayscale:灰階
  • hue-rotate:色相旋轉
  • invert:負片
  • sepia :懷舊
  • saturate:飽和
  • opacity:透明度
  • drop-shadow:下拉陰影

brightness:亮度

See the Pen backdrop-filter:brightness CSS by kumo (@kumo-tw) on CodePen.

contrast:對比

See the Pen backdrop-filter:contrast CSS by kumo (@kumo-tw) on CodePen.

grayscale:灰階

See the Pen backdrop-filter:grayscale CSS by kumo (@kumo-tw) on CodePen.

hue-rotate:色相旋轉

See the Pen backdrop-filter:hue-rotate CSS by kumo (@kumo-tw) on CodePen.

invert:負片

See the Pen backdrop-filter:invert CSS by kumo (@kumo-tw) on CodePen.

sepia:懷舊

See the Pen backdrop-filter:sepia CSS by kumo (@kumo-tw) on CodePen.

saturate:飽和

See the Pen backdrop-filter:saturate CSS by kumo (@kumo-tw) on CodePen.

drop-shadow:下拉陰影

下拉陰影和box-shadow很像,不同的是它是以物件本身內容產生陰影,因此裡面的文字或圖像也會有所渲染,而box-shadow則是以區塊來產生陰影,其內容不會受到影響。

See the Pen backdrop-filter:drop-shadow CSS by kumo (@kumo-tw) on CodePen.

混合應用

backdrop-filter可以同時使用多個值,以下作為範例:

See the Pen mix-backdrop-filterCSS by kumo (@kumo-tw) on CodePen.

以上皆需要多加-webkit-,safari 瀏覽器才有效果。

延伸閱讀

本文是否對您有幫助?