4、主题背景图片制作
先放个截图
找好图片，重命名bg.jpg
新建一个html文件（两者在同一目录下），复制以下内容，保存，再打开就可以截图了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>图片遮罩示例</title>
<style>
.image-container {
position: relative;
display: inline-block;
}
/* 图片样式 */
.image-container img {
display: block;
width: 100%;
height: auto;
}
.mask1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.15); /* 第一层颜色 */
backdrop-filter: blur(30px); /*模糊效果 */
z-index: 1;
}
.mask2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.3); /* 第二层颜色 */
backdrop-filter: blur(40px); /* 模糊效果 */
z-index: 2;
}
</style>
</head>
<body>
<!-- 图片和遮罩层 -->
<div class="image-container">
<img src="bg.jpg" alt="示例图片" />
<div class="mask1"></div>
<div class="mask2"></div>
</div>
</body>
</html>
| 
发表于 2025-5-14 12:23:51
