我有一个背景图片,想要添加背景模糊效果,但是如下图片所示,在滚动时会出现奇怪的闪烁。
Here is the code Css/Html:
.photoSection {
max-height: 90vh;
justify-content: center;
display: flex;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
}
.absoluteHeaderPosition {
padding-top: 57px;
}
.photoBackground {
top: 0px;
position: absolute;
width: 100%;
z-index: -1;
height: 100%;
background-position: center;
}
.photoBackdrop {
top: 0px;
background: linear-gradient(180deg, rgba(31, 29, 33, 0.2) 0%, #1f1d21 100%);
backdrop-filter: blur(180px);
position: absolute;
width: 100%;
z-index: -1;
height: 100%;
}
.pictureContainer {
align-items: center;
margin: 80px;
display: flex;
}
.content {
height: 800px;
}
<div>
<div class="photoSection absoluteHeaderPosition">
<div class="photoBackground" style="background-image: url(https://images.pexels.com/photos/36717/amazing-animal-beautiful-beautifull.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500);"></div>
<div class="photoBackdrop"></div>
<div class="pictureContainer"><img src="https://images.pexels.com/photos/36717/amazing-animal-beautiful-beautifull.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" /></div>
</div>
<div class="content"></div>
</div>