<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);