我有一个全屏快照滚动的HTML页面,每个页面下面都有不同的主题;你可以通过向下滚动访问这些页面.
不同的类别具有使用background-image: url("image.png")
标签设置的不同背景图像.
以下是我的代码:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
body, html {
height: 100%;
}
body {
background-color: black;
}
.slides {
height: 100%;
overflow: scroll;
overflow-x: hidden;
scroll-snap-type: y mandatory;
}
.slide {
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
scroll-snap-align: start;
}
.home {
background-image: url("/img/bg.jpg");
}
.band {
background-image: url("/img/bg2.jpg");
}
.pictures {
background-image: url("/img/bg3.jpg");
}
</style>
</head>
<body>
<div class="slides">
<div class="slide home"></div>
<div class="slide band"></div>
<div class="slide pictures"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</html>
当我要使用以下选项应用滤镜时
filter: brightness(60%) blur(4px);
-webkit-filter: brightness(60%) blur(4px);
它模糊div中的所有子元素,而不是背景图像.
我已经试了backdrop-filter
次,但从来没有成功过.