卡卡網(wǎng)

CSS 數(shù)據(jù)類型<filter-function>代表可以改變輸入圖像外觀的圖形效果。它可以用于filter 和 backdrop-filter 屬性。

語法

<filter-function> 數(shù)據(jù)類型由下列過濾器函數(shù)之一指定的。每個函數(shù)需要一個參數(shù)，如果參數(shù)無效，結(jié)果不會被改變，如同沒有使用過濾器一樣。

blur()

模糊圖像

brightness()

讓圖像更明亮或更暗淡

contrast()

增加或減少圖像的對比度

drop-shadow()

在圖像后方應(yīng)用投影

grayscale()

將圖像轉(zhuǎn)為灰度圖

hue-rotate()

改變圖像的整體色調(diào)

invert()

反轉(zhuǎn)圖像顏色

opacity()

改變圖像透明度

saturate()

超飽和或去飽和輸入的圖像

sepia()

將圖像轉(zhuǎn)為棕褐色

~~~~~~~~~~ ~~~~~~~~~~

下面詳細(xì)介紹使用此數(shù)據(jù)類型的屬性：filter 以及 backdrop-filter。

filter

CSS filter 屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像、背景和邊框的渲染。

有幾個函數(shù)（例如 blur() 和 contrast()）可以幫助你實(shí)現(xiàn)預(yù)定義的效果。

效果如圖

語法

/* <filter-function> 值 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* URL */
filter: url("filters.svg#filter-id");

/* 多個濾鏡 */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* 不使用濾鏡 */
filter: none;

/* 全局值 */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;

可以使用如下方法設(shè)置函數(shù)： 

CSS

filter: <filter-function> [<filter-function>]* | none;

你可以使用 url() 來引用 SVG 濾鏡元素?？梢允褂萌缦抡Z法引用 SVG <filter> 元素：

CSS

filter: url(file.svg#filter-element-id);

函數(shù)

filter 屬性可設(shè)置為 none 或下面列出的一個或多個函數(shù)。如果任何函數(shù)的參數(shù)無效，則該函數(shù)返回 none。除特殊說明外，函數(shù)的值如果接受百分比值（如 34%），那么該函數(shù)也接受小數(shù)值（如 0.34）。

當(dāng)單個 filter 屬性具有多個函數(shù)時，濾鏡將按順序依次應(yīng)用。

blur()

將高斯模糊應(yīng)用于輸入圖像。

filter: blur(5px);

brightness()

將線性乘法器應(yīng)用于輸入圖像，以調(diào)整其亮度。值為 0% 將創(chuàng)建全黑圖像；值為 100% 會使輸入保持不變，其他值是該效果的線性乘數(shù)。如果值大于 100% 將使圖像更加明亮。 

filter: brightness(2);

contrast()

調(diào)整輸入圖像的對比度。值是 0% 將使圖像變灰；值是 100%，則無影響；若值超過 100% 將增強(qiáng)對比度。

filter: contrast(200%);

drop-shadow()

使用 <shadow> 參數(shù)沿圖像的輪廓生成陰影效果。陰影語法類似于 <box-shadow>（在 CSS 背景和邊框模塊中定義），但不允許使用 inset 關(guān)鍵字以及 spread 參數(shù)。與所有 filter 屬性值一樣，任何在 drop-shadow() 后的濾鏡同樣會應(yīng)用在陰影上。

filter: drop-shadow(16px 16px 10px black);

grayscale()

將圖像轉(zhuǎn)換為灰度圖。值為 100% 則完全轉(zhuǎn)為灰度圖像，若為初始值 0% 則圖像無變化。值在 0% 到 100% 之間，則是該效果的線性乘數(shù)。

filter: grayscale(100%);

hue-rotate()

應(yīng)用色相旋轉(zhuǎn)。<angle> 值設(shè)定圖像會被調(diào)整的色環(huán)角度值。值為 0deg，則圖像無變化。

filter: hue-rotate(90deg);

invert()

反轉(zhuǎn)輸入圖像。值為 100% 則圖像完全反轉(zhuǎn)，值為 0% 則圖像無變化。值在 0% 和 100% 之間，則是該效果的線性乘數(shù)。

filter: invert(100%);

opacity()

應(yīng)用透明度。值為 0% 則使圖像完全透明，值為 100% 則圖像無變化。

filter: opacity(50%);

saturate()

改變圖像飽和度。值為 0% 則是完全不飽和，值為 100% 則圖像無變化。超過 100% 則增加飽和度。 

filter: saturate(200%);

sepia()

將圖像轉(zhuǎn)換為深褐色。值為 100% 則完全是深褐色的，值為 0% 圖像無變化。

filter: sepia(100%);

組合函數(shù)

你可以組合任意數(shù)量的函數(shù)來控制渲染。濾鏡將按聲明順序依次應(yīng)用。以下示例增強(qiáng)了圖像的對比度和亮度。

filter: contrast(175%) brightness(103%);

示例

應(yīng)用 filter 函數(shù)

filter 屬性被應(yīng)用于第二張圖片，為其本身以及邊框添加灰度和模糊效果。

CSS

img {
  border: 5px solid yellow;
}
/* 為第二張圖像應(yīng)用 40% 灰度并以 5px 進(jìn)行模糊 */
img:nth-of-type(2) {
  filter: grayscale(0.4) blur(5px);
}

HTML

<img src="pencil.jpg" alt="原圖清晰" />
<img src="pencil.jpg" alt="該圖像及其邊框被應(yīng)用了模糊和灰度效果" />

效果

重復(fù)濾鏡函數(shù)

濾鏡函數(shù)按出現(xiàn)順序應(yīng)用。可以重復(fù)相同的濾鏡函數(shù)。

CSS

#MDN-logo {
  border: 1px solid blue;
  filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0
        red);
}

效果

濾鏡函數(shù)按順序應(yīng)用。這就是陰影顏色不同的原因：第一個陰影的色調(diào)被 hue-rotate() 函數(shù)改變，而第二個陰影的色調(diào)沒有被改變。

backdrop-filter

backdrop-filter CSS 屬性可以讓你為一個元素后面區(qū)域添加圖形效果（如模糊或顏色偏移）。因?yàn)樗m用于元素背后的所有元素，為了看到效果，必須使元素或其背景至少部分透明。

CSS

/* 關(guān)鍵詞值 */
backdrop-filter: none;

/* 指向 SVG 濾鏡的 URL */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 濾鏡函數(shù)值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* 多重濾鏡 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* 全局值 */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: unset;

語法

值：none

沒有應(yīng)用于背景的濾鏡。

值：<filter-function-list>

一個以空格分隔的濾鏡函數(shù)（<filter-function>）或是要應(yīng)用到背景上的 SVG 濾鏡。

示例

CSS

.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url(https://picsum.photos/id/1080/6858/4574),
    linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

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

HTML

<div class="container">
  <div class="box">
    <p>backdrop-filter: blur(10px)</p>
  </div>
</div>

效果

總結(jié)

本文詳細(xì)介紹了<filter-function>過濾器函數(shù)，介紹了使用此數(shù)據(jù)類型的屬性：filter 以及 backdrop-filter。希望對你有所幫助。

標(biāo)簽: filter-function  過濾器函數(shù)  filter  backdrop-filter