我有一个全屏快速滚动 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/[email protected]/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/[email protected]/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你可以将背景放在伪元素中，就像这样
.home {
position: relative;
}
.home:before {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom:0;
left: 0;
background-image: url("/img/bg.jpg");
//apply your filter here
}
}
我修改了你的css代码，请尝试使用，希望能解决你的问题。
body, html {
height: 100%;
margin: 0; /* Remove default margin */
}
body {
background-color: black;
overflow: hidden; /* Hide scrollbars */
}
.slides {
height: 100%;
overflow: hidden; /* Hide scrollbars */
}
.slide {
position: relative;
height: 100%;
overflow: hidden;
scroll-snap-align: start;
}
.slide::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: brightness(60%) blur(4px);
-webkit-filter: brightness(60%) blur(4px);
z-index: -1;
}
.home::before {
background-image: url("poster_1.png");
}
.band::before {
background-image: url("poster_1.png");
}
.pictures::before {
background-image: url("poster_1.png");
}