数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学使用 CSS3 为图像添加投影
filter 属性用于设置视觉效果，例如 CSS 中图像的投影、对比度、亮度、饱和度和阴影。以下是语法：
语法
filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
如上所示，使用filter 属性，我们可以设置以下效果：投影、模糊、亮度、对比度、灰度、色调旋转、反转、不透明度、饱和度、棕褐色和 url。
图像上的投影可能如下所示：
要在 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>
应用水平和垂直投影效果
示例
以下是如何为图像设置水平和垂直投影效果的示例。使用具有h-shadow 和v-shadow 值的drop-shadow 可以实现相同的效果：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(5px 5px 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>
为投影应用模糊效果
示例
模糊效果是 drop-shadow 下的第三个值。将其设置为像素以获得模糊效果：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(120%);
filter: drop-shadow(5px 0 20px orange);
}
</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>
更新于：2023年10月27日
8K+ 浏览量
广告