如何在滚动时停止图片移动，CSS背景位置：固定；答案

【问题标题】：how to stop picture moving whie scrolling, css background-position: fixed;如何在滚动时停止图片移动，CSS背景位置：固定；
【发布时间】：2020-05-20 12:20:00
【问题描述】：

我使用background-img 在 div 上制作了“玻璃”（模糊）效果，但我不希望背景在滚动时移动。

代码笔：https://codepen.io/metsuge/pen/gOaZzzM

有什么想法吗？

HTML

<div class="each-img">
  <div class="text-container-glass"></div>
</div>
<div class="each-img">
  <div class="text-container-glass"></div>
</div>

CSS

.each-img {  
  overflow: hidden;
  width: 600px;
  height:400px;
  background-image: url("https://images2.minutemediacdn.com/image/upload/c_crop,h_1414,w_2101,x_10,y_0/v1554702738/shape/mentalfloss/49786-istock_0.jpg?itok=C4VA9VSs");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 10px;
  border: 5px solid transparent;
  position: relative;
  background-attachment: fixed;
}

.text-container-glass{
  background: inherit;
  width: 50%;
  height: 120px; 
  position: absolute;
  bottom: 0px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.text-container-glass{
  background: inherit;
  width: 50%;
  height: 120px; 
  position: absolute;
  bottom: 0px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.text-container-glass:before{
  content: '';
  position: absolute;
  background: inherit;
  top:0;
  left:0;
  right:0;
  bottom:0;
  filter: blur(12px);
}

似乎background-image 固定在屏幕本身，而不是div each-img

【问题讨论】：

您是否尝试实现视差效果？
据我了解，视差是当您滚动并且所有元素都在移动（如文本）时，但背景图像不是。我需要相反的情况，背景图像像普通元素一样移动。
我明白你的意思了。尝试在您的.each-img { } CSS 中删除此行background-attachment: fixed;。这将使图像相对于 div 元素内的屏幕固定。也许这就是你要找的东西？

标签： html css

【解决方案1】：

在.each-img上设置background-attachment: scroll;

【讨论】：

这确实修复了滚动问题，但现在模糊的 div 就像背景一样的图片，而不是“透明”
这是另一个问题吗？由于滚动事物的变化，模糊的div有所不同？还是固定和滚动背景附件都一样？
你可以使用opacity属性来控制div的透明度
模糊效果还可以，但现在看起来像两张图片，一张在一张。我希望 div 相对于父 div 背景具有相同的背景部分。目标是只模糊背景的 div 部分。
抱歉，我觉得我做不到。