在网站上工作时遇到以下问题。 Magnific Popup（灯箱插件）将HTML设置为溢出：隐藏;当灯箱打开时，这会阻止滚动。
在我的页面上，我有一个固定的标题图片：
.header {
background-image: url("http://placehold.it/1920x400");
height: 400px;
background-size: contain;
background-attachment: fixed;
}
当我打开灯箱时，html设置为溢出：隐藏; 并且背景图片移动。溢出：隐藏;导致背景移动。
我不知道这种行为是什么，我尝试了以下几点：
Magnific Popup还在html元素上设置了一个margin-right，以防止内容移动，这不适用于后台。
尝试过设置overflow-y：scroll;当灯箱打开时，这也不起作用。
我简化了我的代码并最终得到了这个Codepen，看到后台移动点击按钮。
Codepen： Link to codepen
希望你能帮助我，
的Wouter
修改
我想解决移动背景而不将溢出设置为自动。当灯箱打开时，当滚动条可见时，我不喜欢它。
答案 0 :(得分：6)
来自background-attachment的MDN文章：
已修复：此关键字表示背景已根据视口修复。
由于您的元素相对于“视口”定位，因此当您切换到overflow: hidden时，视口移动稍微宽一些，删除滚动条会因为您使用{而导致背景重新定位{1}}。背景现在有更多的空间来覆盖，因此尺寸略有增加。
尽管我讨厌使用background-size: contain，但您可以覆盖插件的更改：
!important如果插件使用的是一个类而不是直接改变html元素的样式，那么你可以重写它而不重要。
答案 1 :(得分：2)
找到了解决这个问题的方法，这是在css reddit中发布的：
background-size: calc(100% - 17px)
这是第一个解决方案Codepen of first solution background-size: 100vw
这是第二个解决方案Codepen of second solution