1 filter

filter property MDN

Image Filters W3S

CODEPEN LINK

filter: 使圖形元素(圖案、背景、邊框) 模糊或 顏色偏移的效果。

SVG filter

url()

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

Filter 函数 /* <filter-function> values */

• 高斯模糊 filter: blur(5px);
  blur - default: 0，不接受%。

• 明亮度 filter: brightness(0.4);
  brightness - default: 1，0% 全黑、100%(= 1) 不變明亮度、> 100% 增加明亮度。

• 對比度 filter: contrast(200%);
  contrast - default: 1，0% 全黑、100%(=1) 不變對比度、> 100% 增加對比度。
  

• 圖案陰影效果 filter: drop-shadow(16px 16px 20px blue);
drop-shadow(<offset-x>必 <offset-y>必 <blur-radius>選 <color>選)
  • 陰影偏移<offset-x> <offset-y> （必須）
  • <offset-x>水平偏移，正值陰影在右。<offset-y>垂直偏移，正值陰影在下。
  • <blur-radius> (選)
    值越大，越模糊，所以陰影可以變得更大或更淡。
    不允許負值。 default: 0（陰影的邊界很銳利）。
  • <color> (選)

filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: unset;

2 backdrop-filter

backdrop-filter

codepen backdrop-filter blur

button:active,
button:hover {
  backdrop-filter: blur(10px);
}