不幸的是，这只是固定位置在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相对于容器元素而不是视口进行计算。
602392714
清零编程群