如何让背景图在全屏幕尺寸下固定位置不偏移？

无需依赖大量媒体查询，通过CSS视口单位与背景定位特性即可实现所有屏幕尺寸下的位置固定：

优化后的CSS代码 #

body {
    background: hsl(185, 75%, 39%);
    background-image: url(./assets/bg-pattern-top.svg), url(./assets/bg-pattern-bottom.svg);
    background-repeat: no-repeat;
    /* 顶部圆形固定在左上角外侧，底部圆形固定在右下角外侧 */
    background-position: right 50vw bottom 50vh, left 50vw top 50vh;
    background-attachment: fixed;
    font-family: 'Kumbh Sans';
}

实现原理 #

• background-position 使用视口单位（vw/vh）：顶部圆形的右侧距离视口右侧50倍视口宽度，底部距离视口底部50倍视口高度；底部圆形则反向设置，确保两者始终处于屏幕的左上角和右下角外侧区域，不会随屏幕尺寸变化偏移
• background-attachment: fixed：让背景图片相对于视口固定，保持位置的稳定性，不受页面滚动影响
• 这种写法完全自适应所有设备，不需要针对不同断点编写媒体查询

如果需要适配Tailwind，可以将这些样式添加到自定义配置中，或者通过内联style属性直接应用。

内容的提问来源于stack exchange，提问作者Sam Rad