原图
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
padding: 5% 0;
background-color: aliceblue;
display: flex;
flex-direction: column;
align-items: center;
}
.title{
font-size: 2rem;
font-weight: 700;
line-height: 1.5;
margin-bottom: 15px;
}
img{
/* 阴影模糊半径 */
filter: drop-shadow(10px 10px 20px #000);
box-shadow: 10px 10px 20px #000;
}
</style>
</head>
<body>
<div class="title">给背景图加上
</div>
<img src="./img/pepel.png" alt="">
</body>
</html>
原理
CSS filter 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染
使用 参数沿图像的轮廓生成阴影效果。阴影语法类似于 （在 CSS 背景和边框模块中定义），但不允许使用 inset 关键字以及 spread 参数。与所有 filter 属性值一样，任何在 drop-shadow() 后的滤镜同样会应用在阴影上。
