如何使用CSS为background URL图片设置负边距实现无缝图案？

实现思路 #

负margin作用于DOM元素的排版规则，不会影响元素内部的背景图定位，要实现背景图重叠消接缝，直接使用CSS背景相关属性即可，不需要额外修改HTML结构。

最优方案：多重背景错位叠加 #

给元素设置两层相同的背景，第二层偏移合适的位置，两层图案会互相覆盖接缝，实现无缝拼接效果，修改后的CSS代码如下：

<style>
    .bg{
        /* 同时声明两层相同的背景图 */
        background: url('./pattern.png'), url('./pattern.png');
        background-size: 600px;
        /* 第二层背景水平、垂直均偏移300px（背景尺寸的1/2，可根据实际接缝位置调整） */
        background-position: 0 0, 300px 300px;
        width: 100vw;
        height: 100vh;
    }
</style>

调整说明 #

如果调整后还有可见接缝，可以按需修改background-position的第二个偏移值：

• 仅水平方向有接缝：只调整水平偏移量，例如background-position: 0 0, 20px 0，让背景水平重叠20px盖住接缝
• 仅垂直方向有接缝：只调整垂直偏移量，例如background-position: 0 0, 0 20px
• 偏移量可以根据实际测试的效果灵活调整，不需要固定为背景尺寸的一半

内容的提问来源于stack exchange，提问作者Khebab-Case