不幸的是，这只是固定位置在CSS中的工作原理，而在纯CSS中则无法解决-您必须使用Javascript。
之所以出现这种情况是由于组合
background-attachment: fixed和
background-size:cover。当您指定
background-attachment: fixed它时，它实际上会使
background-image行为就像是一幅
position: fixed图像，这意味着它是从页面流和定位上下文中取出的，并且相对于视口而不是相对于其背景图像的元素。
因此，每当您同时使用这些属性时，
cover无论元素本身的大小如何，都会相对于视口的大小来计算值，这就是为什么当元素与视口的大小相同但被裁剪时，它可以按预期工作的原因元素小于视口时的意外方式。
为了解决这个问题，您基本上需要使用
background-attachment:scroll事件监听器并将其绑定到
scrollJS中的事件，该事件监听器手动更新
background-position相对于窗口已滚动的距离的相对值，以模拟固定位置，但仍
background-size: cover相对于容器元素而不是视口进行计算。
