CSS filter 屬性

CSS filter 屬性應用圖形效果，例如模糊、亮度、對比度等等，到元素上。它允許我們操作元素的顯示方式，而不會改變其底層內容或結構。

語法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

屬性值

值	描述
none	指定無效果。預設值。
blur(px)	應用影像模糊效果。值越大，模糊效果越明顯。預設為 0。
brightness(%)	調整影像亮度。0% 會導致影像變黑，100% 為預設值，顯示原始影像。
contrast(%)	調整影像對比度。0% 會導致影像變黑，100% 為預設值，顯示原始影像。
drop-shadow(offset-x, offset-y, blur-radius, color)	為元素應用投影效果。 offset-x: 指定陰影相對於元素的水平距離。正值使陰影向右移動，負值使陰影向左移動。 offset-y: 指定陰影相對於元素的垂直距離。正值使陰影向下移動，負值使陰影向上移動。 blur-radius: 定義陰影的模糊半徑。值越大，陰影越模糊；值越小，陰影越清晰。 color: 設定陰影的顏色。可以是命名顏色、十六進位制程式碼、RGB、RGBA、HSL 或 HSLA 值。
grayscale(%)	將影像轉換為灰度影像。0% 為預設值，表示原始影像；100% 為灰度影像。不允許使用負值。
hue-rotate(deg)	應用色相旋轉。指定角度會根據顏色圓上的角度調整影像。0deg 為預設值，表示原始影像；360deg 為最大值。
invert(%)	反轉影像。0% 為預設值，表示原始影像；100% 會導致影像完全反轉。不允許使用負值。
opacity(%)	控制影像的透明度。0% 表示完全透明的影像；100% 為預設值，表示原始影像（不透明）。不允許使用負值。
saturate(%)	飽和影像。0% 表示不飽和的影像；100% 為預設值，表示原始影像。不允許使用負值。
sepia(%)	將影像轉換為棕褐色。0% 為預設值，表示原始影像；100% 為棕褐色影像。不允許使用負值。
url()	獲取指定 SVG 濾鏡的 XML 檔案位置，可能包含指向特定濾鏡元素的錨點。例如：filter: url(svg-url#element-id)。
initial	將屬性設定為其預設值。
inherit	從父元素繼承屬性。

CSS filter 屬性示例

以下示例解釋了具有不同值的filter 屬性。

使用 none 函式的 filter 屬性

為了不對元素產生任何影響，我們使用none 值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      #filter{
         filter: none;
      }

   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <h4>
      filter: none
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="250" height="250" id="filter"/>
</body>

</html>

使用 blur 函式的 filter 屬性

為了在元素中引入模糊效果，我們使用blur() 函式。我們以畫素為單位指定模糊值。值越大，模糊效果越明顯。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      #filter{
         filter: blur(5px);
      }

   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <h4>
      filter: blur(5px)
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="250" height="250" id="filter"/>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image"
   width="200" height="200"/>

</body>

</html>

使用 brightness 函式的 filter 屬性

為了調整元素的亮度，我們使用brightness() 函式。我們以百分比為單位指定值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: brightness(30%);
      }

      #filter2 {
         filter: brightness(60%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: brightness(30%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: brightness(60%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

使用 contrast 函式的 filter 屬性

為了調整元素的暗度，我們使用contrast 函式。我們以百分比為單位指定值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: contrast(20%);
      }

      #filter2 {
         filter: contrast(55%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: contrast(20%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: contrast(55%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

使用 drop-shadow 函式的 filter 屬性

為了向元素新增背景陰影，我們使用drop-shadow() 函式。我們以畫素和顏色格式指定值。它最多可接受 4 個值。第一個值是 x 偏移量，第二個值是 y 偏移量，第三個是模糊半徑，第四個是陰影的顏色。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
         gap: 10px;
      }

      #filter1 {
         filter: drop-shadow(15px 20px 15px grey);
      }

      #filter2 {
         filter: drop-shadow(40px 40px 40px red);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: drop-shadow (15px 20px 15px grey)
      </h4>
      <img src="/css/images/content.png" alt="image" 
         width="250" height="250" id="filter1" />
      <h4>
         filter: drop-shadow (40px 40px 40px red)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>


</body>

</html>

使用 grayscale 函式的 filter 屬性

為了突出元素中的黑白特徵，我們使用grayscale() 函式。我們以百分比為單位指定值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: grayscale(65%);
      }

      #filter2 {
         filter: grayscale(100%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: grayscale(45%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: grayscale(100%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

使用 hue-rotate 函式的 filter 屬性

為了透過旋轉色相角來調整元素顏色的色相，我們使用hue-rotate() 函式。我們以度為單位指定值。度值指定圍繞色輪的旋轉角度，這會建立各種顏色效果和變換。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: hue-rotate(75deg);
      }

      #filter2 {
         filter: hue-rotate(35deg);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: hue-rotate(75deg)
      </h4>
      <img src="/css/images/content.png" alt="image" width="250" height="250" id="filter1" />
      <h4>
         filter: hue-rotate(35deg)
      </h4>
      <img src="/css/images/content.png" alt="image" width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image" width="200" height="200" />

</body>

</html>

使用 opacity 函式的 filter 屬性

為了調整元素的透明度，我們使用opacity() 函式。我們以百分比為單位指定值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: opacity(35%);
      }

      #filter2 {
         filter: opacity(60%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: opacity(35%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: opacity(60%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

使用 saturate 函式的 filter 屬性

為了調整元素的顏色飽和度，我們使用saturate() 函式。我們以百分比為單位指定值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: saturate(25%);
      }

      #filter2 {
         filter: saturate(65%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: saturate(25%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: saturate(65%
      )</h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

使用 sepia 函式的 filter 屬性

為了向元素應用棕褐色調，使其呈現類似於舊照片的溫暖的棕色外觀，我們使用sepia() 函式。我們以百分比為單位指定值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         display: grid;
      }

      #filter1 {
         filter: sepia(45%);
      }

      #filter2 {
         filter: sepia(90%);
      }
   </style>
</head>

<body>
   <h2>
      CSS filter property
   </h2>
   <div>
      <h4>
         filter: sepia(45%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter1" />
      <h4>
         filter: sepia(90%)
      </h4>
      <img src="/css/images/content.png" alt="image" 
      width="250" height="250" id="filter2" />
   </div>
   <h4>
      Image used: 
   </h4>
   <img src="/css/images/content.png" alt="image" 
   width="200" height="200" />

</body>

</html>

使用 filter URL 的 filter 屬性

為了將外部 SVG 濾鏡應用於元素，以便我們可以使用在 SVG 檔案中定義的自定義濾鏡效果（可以包含諸如顏色調整、模糊和失真之類的複雜效果），我們必須在url() 中指定濾鏡的 id。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .myelement {
         filter: url(#pink-flower);
      }

      div {
         display: grid;
         gap: 10px;
         max-width: 300px;
      }

      img {
         width: 100%;
         max-height: 200px;
         object-fit: cover;
      }

      svg {
         height: 0;
      }
   </style>
</head>

<body>
   <svg xmlns="http://www.w3.org/2000/svg">
   <defs>
   <filter id="pink-flower" x="0" y="0" 
   width="100%" height="100%">
   <feComponentTransfer>
   <feFuncR type="linear" slope="1" intercept="0.5">
   </feFuncR>
   <feFuncG type="linear" slope="0.5" intercept="0.5">
   </feFuncG>
   <feFuncB type="linear" slope="0" intercept="1">
   </feFuncB>
   </feComponentTransfer>
   </filter>
   </defs>
   </svg>
   <h2>
      CSS filter property
   </h2>
   <h3>
      filter: url() function
   </h3>
   <div>
      <img src="/css/images/content.png" 
      alt="pink flower" />
      <img src="/css/images/content.png" 
      alt="blurred pink flower" class="myelement" />
   </div>
</body>

</html>

支援的瀏覽器

屬性
filter	53.0	13.0	35.0	9.1	40.0

css_properties_reference.htm

列印頁面