CSS filter
CSS filter
CSS filter用于将视觉效果设置为文本，图像和网页的其他方面。 CSS
filter 属性使我们能够访问颜色或模糊之类的效果，在显示元素之前先转移元素的呈现。
filter 属性使我们能够访问颜色或模糊之类的效果，在显示元素之前先转移元素的呈现。
CSS filter属性的语法是
语法
filter: none | invert() | drop-shadow() | brightness() | saturate() | blur() | hue-rotate() | contrast() | opacity() | grayscale() | sepia() | url();
让我们讨论一个示例的属性值。
brightness()
顾名思义，它用于设置屏幕的亮度。如果亮度为0％，则表示完全为黑色，而100％亮度为原始亮度。它也可以接受高于100％的值以提供更明亮的结果。
我们可以通过以下插图来理解它。
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS filter属性</title>
<style>
body{
text-align:center;
}
#img1 {
filter: brightness(130%);
}
</style>
</head>
<body>
<img src="../uploads/html/rose.jpg" > <h2>原图像 </h2>
<img src="../uploads/html/rose.jpg" id="img1"> <h2>brightness(130%)</h2>
</body>
</html>
输出
blur()
用于将模糊效果应用于元素。如果未指定模糊值，则将值0用作默认值。 blur()属性中的参数不接受百分比值。较大的值会产生更多模糊。
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS filter属性</title>
<style>
body{
text-align:center;
}
#img1 {
filter: blur(2px);
}
</style>
</head>
<body>
<img src="../uploads/html/rose.jpg" > <h2>原图像 </h2>
<img src="../uploads/html/rose.jpg" id="img1"> <h2>blur(2px)</h2>
</body>
</html>
输出
invert()
它用于反转输入图像中的样本。其100％值表示完全反转，而0％值则保持不变。不允许使用负值。
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS filter属性</title>
<style>
body{
text-align:center;
}
#img1 {
filter: invert(60);
}
</style>
</head>
<body>
<img src="../uploads/html/rose.jpg" > <h2>原图像 </h2>
<img src="../uploads/html/rose.jpg" id="img1"> <h2>invert(60)</h2>
</body>
</html>
输出
saturate()
它设置元素的饱和度。 0％饱和度表示完全不饱和元素，而100％饱和度表示原始元素。允许大于100％的值提供超饱和结果。我们不能对此属性使用负值。
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS filter属性</title>
<style>
body{
text-align:center;
}
#img1 {
filter: saturate(40);
}
</style>
</head>
<body>
<img src="../uploads/html/rose.jpg" > <h2>原图像 </h2>
<img src="../uploads/html/rose.jpg" id="img1"> <h2>saturate(40)</h2>
</body>
</html>
输出
下拉阴影()
它将下拉阴影效果应用于输入图像。它接受的值为
h阴影，v阴影，模糊，散布和
颜色。
h阴影，v阴影，模糊，散布和
颜色。
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS filter属性</title>
<style>
body{
text-align:center;
}
#img1 {
filter: drop-shadow(10px 20px 30px yellow);
}
</style>
</head>
<body>
<img src="../uploads/html/rose.jpg" > <h2>原图像 </h2>
<img src="../uploads/html/rose.jpg" id="img1"> <h2> drop-shadow(10px 20px 30px yellow);</h2>
</body>
</html>
输出
contrast()
它调整输入的对比度。其0％的值将创建一个全黑的图像，而100％的值则保持不变，即代表原始输入。允许大于100％的值提供对比度较低的结果。
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS filter属性</title>
<style>
body{
text-align:center;
}
#img1 {
filter: contrast(50%);
}
</style>
</head>
<body>
<img src="../uploads/html/rose.jpg" > <h2>原图像 </h2>
<img src="../uploads/html/rose.jpg" id="img1"> <h2> contrast(50%)</h2>
</body>
</html>
输出
opacity()
它用于对输入图像应用透明度。其0％值表示完全透明，而100％值表示原始图像，即完全不透明。
让我们通过插图来理解它。
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS filter属性</title>
<style>
body{
text-align:center;
}
#img1 {
filter: opacity(40%);
}
</style>
</head>
<body>
<img src="../uploads/html/rose.jpg" > <h2>原图像 </h2>
<img src="../uploads/html/rose.jpg" id="img1"> <h2> opacity(40%)</h2>
</body>
</html>
输出
hue-rotate()
它将色相旋转应用于输入图像。其周长值定义了色环周围的度数；图像将被调整。其默认值为0度，代表原始图像。最大值为360度。
让我们通过插图来理解它。
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS filter属性</title>
<style>
body{
text-align:center;
}
#img1 {
filter: hue-rotate(240deg);
}
</style>
</head>
<body>
<img src="../uploads/html/rose.jpg" > <h2>原图像 </h2>
<img src="../uploads/html/rose.jpg" id="img1"> <h2> hue-rotate(240deg)</h2>
</body>
</html>
输出
grayscale()
它将输入图像转换为黑白图像。 0％灰度代表原始灰度，而100％代表完全灰度。它将对象的颜色转换为256个灰色阴影。
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS filter属性</title>
<style>
body{
text-align:center;
}
#img1 {
filter: grayscale(80%);
}
</style>
</head>
<body>
<img src="../uploads/html/rose.jpg" > <h2>原图像 </h2>
<img src="../uploads/html/rose.jpg" id="img1"> <h2> grayscale(80%)</h2>
</body>
</html>
输出
sepia()
它用于将图像转换为棕褐色图像。值为0％表示原始图像，而值为100％表示完全为棕褐色。
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS filter属性</title>
<style>
body{
text-align:center;
}
#img1 {
filter: sepia(90%);
}
</style>
</head>
<body>
<img src="../uploads/html/rose.jpg" > <h2>原图像 </h2>
<img src="../uploads/html/rose.jpg" id="img1"> <h2> sepia(90%)</h2>
</body>
</html>
输出
