数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用CSS为图像添加视觉效果？
filter属性用于设置视觉效果，例如在CSS中为图像添加投影、对比度、亮度、饱和度和阴影。以下是语法：
语法
以下是语法：
filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
如上所示，使用filter属性，我们可以设置以下效果：对比度、投影、模糊、亮度、灰度、色调旋转、反转、不透明度、饱和度、棕褐色、url。
以下是使用CSS为图像添加视觉效果的示例代码：
使用反转效果为图像添加视觉效果
invert()用于反转图像中的样本。其中，0%（0）是实际图像，而100%的值将完全反转图像。要在CSS3中反转图像，请使用filter属性的invert()值。
示例
让我们来看一个使用反转效果为图像添加视觉效果的示例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img{
margin: 20px;
}
img.normal{
width: 300px;
height: 300px;
}
img.filter {
width: 300px;
height: 300px;
filter: invert(100%);
}
</style>
</head>
<body>
<h1>CSS Image effects example</h1>
<img class="normal" src="https://tutorialspoint.com/python/images/python-mini-logo.jpg">
<img class="filter" src="https://tutorialspoint.com/python/images/python-mini-logo.jpg">
</body>
</html>
使用色调旋转为图像添加视觉效果
色调旋转会调整，即增加或减少图像色调值。要在CSS3中设置图像的色调旋转，请对filter属性使用hue-rotate值。色调旋转以度数设置，例如：
实际图像：0度，即默认值
旋转30度：30度
旋转90度：90度，等等。
正色调旋转：增加色调值
负色调旋转：减少色调值
示例
现在让我们来看一个使用CSS3应用色调旋转的示例。我们将色调旋转设置为45度：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: hue-rotate(45deg);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>
使用投影效果为图像添加视觉效果
要在CSS3中为图像添加投影效果，请对filter属性使用drop-shadow值。它具有以下值：
h-shadow − 指定水平阴影的像素值。
v-shadow − 指定垂直阴影的像素值。负值将阴影放置在图像上方。
blur − 为阴影添加模糊效果。
spread − 正值会导致阴影扩展，负值会导致阴影收缩。
color − 为阴影添加颜色
示例
让我们来看一个使用drop-shadow为图像应用投影效果的示例：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(10px 10px 10px green);
}
</style>
</head>
<body>
<h1>Learn MySQL</h1>
<img src="https://tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
使用棕褐色效果为图像添加视觉效果
sepia为图像设置棕褐色效果。要在CSS3中设置棕褐色效果，请对filter属性使用sepia值：
实际图像：0%
完全棕褐色：100%
示例
在这里，我们将棕褐色设置为100%，以获得完全效果：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: sepia(100%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>
使用饱和度为图像添加视觉效果
要在CSS3中调整图像的饱和度，请对filter属性使用saturate值。饱和度以百分比值设置，例如：
未饱和图像：0%
实际图像：100%，即默认值
超级饱和：设置为超过100%
示例
让我们看看如何使用filter属性和saturate值在CSS中饱和图像：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: saturate(100%);
}
</style>
</head>
<body>
<h1>Learn Spring Framework</h1>
<img src="https://tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
<h1>Learn Spring Framework</h1>
<img class="demo" src="https://tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring Framework" width="160" height="150">
</body>
</html>
321 次查看
