<filter-function> 資料型別使用下面列出的濾鏡函式之一來指定。每個函式都需要一個引數，如果引數無效，則不會應用任何濾鏡。
blur()-
模糊影像。
brightness()-
使影像更亮或更暗。
contrast()-
增加或減少影像的對比度。
drop-shadow()-
在影像後面應用陰影。
grayscale()-
將影像轉換為灰度。
hue-rotate()-
改變影像的整體色相。
invert()-
反轉影像的顏色。
opacity()-
使影像透明。
saturate()-
使輸入影像高度飽和或去飽和。
sepia()-
將影像轉換為棕褐色。
<filter-function> =
<blur()> |
<brightness()> |
<contrast()> |
<drop-shadow()> |
<grayscale()> |
<hue-rotate()> |
<invert()> |
<opacity()> |
<sepia()> |
<saturate()>
<blur()> =
blur( <length>? )
<brightness()> =
brightness( [ <number> | <percentage> ]? )
<contrast()> =
contrast( [ <number> | <percentage> ]? )
<drop-shadow()> =
drop-shadow( [ <color>? && <length>{2,3} ] )
<grayscale()> =
grayscale( [ <number> | <percentage> ]? )
<hue-rotate()> =
hue-rotate( [ <angle> | <zero> ]? )
<invert()> =
invert( [ <number> | <percentage> ]? )
<opacity()> =
opacity( [ <number> | <percentage> ]? )
<sepia()> =
sepia( [ <number> | <percentage> ]? )
<saturate()> =
saturate( [ <number> | <percentage> ]? )
此示例提供了一個圖形、一個選擇選單（允許您選擇不同型別的濾鏡函式）和一個滑塊（允許您更改濾鏡函式中使用的值）。更新控制元件會即時更新濾鏡效果，讓您可以研究不同濾鏡的效果。
下拉選單選擇函式名稱，滑塊設定該函式的引數值。對於 drop-shadow，該值用於水平和垂直偏移，半徑設定為該值的一半。
<div></div>
<ul>
<li>
<label for="filter-select">Choose a filter function:</label>
<select id="filter-select">
<option selected>blur</option>
<option>brightness</option>
<option>contrast</option>
<option>drop-shadow</option>
<option>grayscale</option>
<option>hue-rotate</option>
<option>invert</option>
<option>opacity</option>
<option>saturate</option>
<option>sepia</option>
</select>
</li>
<li><input type="range" /><output></output></li>
<li>
<p>Current value: <code></code></p>
</li>
</ul>
div {
width: 100%;
height: 512px;
background-image: url("https://mdn.github.io/shared-assets/images/examples/fx-nightly-512.png");
background-repeat: no-repeat;
background-position: center center;
}
li {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
input {
width: 60%;
}
output {
width: 5%;
text-align: center;
}
select {
width: 40%;
margin-left: 2px;
}
const selectElem = document.querySelector("select");
const divElem = document.querySelector("div");
const slider = document.querySelector("input");
const output = document.querySelector("output");
const curValue = document.querySelector("p code");
selectElem.addEventListener("change", () => {
setSlider(selectElem.value);
setDiv(selectElem.value);
});
slider.addEventListener("input", () => {
setDiv(selectElem.value);
});
function setSlider(filter) {
switch (filter) {
case "blur":
slider.value = 0;
slider.min = 0;
slider.max = 30;
slider.step = 1;
slider.setAttribute("data-unit", "px");
break;
case "brightness":
case "contrast":
case "saturate":
slider.value = 1;
slider.min = 0;
slider.max = 4;
slider.step = 0.05;
slider.setAttribute("data-unit", "");
break;
case "drop-shadow":
slider.value = 0;
slider.min = -20;
slider.max = 40;
slider.step = 1;
slider.setAttribute("data-unit", "px");
break;
case "opacity":
slider.value = 1;
slider.min = 0;
slider.max = 1;
slider.step = 0.01;
slider.setAttribute("data-unit", "");
break;
case "grayscale":
case "invert":
case "sepia":
slider.value = 0;
slider.min = 0;
slider.max = 1;
slider.step = 0.01;
slider.setAttribute("data-unit", "");
break;
case "hue-rotate":
slider.value = 0;
slider.min = 0;
slider.max = 360;
slider.step = 1;
slider.setAttribute("data-unit", "deg");
break;
default:
console.error("Unknown filter set");
}
}
function setDiv(filter) {
const unit = slider.getAttribute("data-unit");
const offset = `${Math.round(slider.value)}${unit}`;
const radius = `${Math.round(Math.abs(slider.value / 2))}${unit}`;
divElem.style.filter =
filter === "drop-shadow"
? `${selectElem.value}(${offset} ${offset} ${radius})`
: `${selectElem.value}(${slider.value}${unit})`;
updateOutput();
updateCurValue();
}
function updateOutput() {
output.textContent = slider.value;
}
function updateCurValue() {
curValue.textContent = `filter: ${divElem.style.filter}`;
}
setSlider(selectElem.value);
setDiv(selectElem.value);