如何在使用 CSS 时为背景 URL 图像设置负边距？ [复制]答案

【问题标题】：How can I set negative margin for background URL image in using CSS? [duplicate]如何在使用 CSS 时为背景 URL 图像设置负边距？ [复制]
【发布时间】：2021-11-03 20:26:54
【问题描述】：

我需要使用 CSS/HTML 将背景 URL 融入无缝模式。

为了完成这项工作，我正在尝试应用诸如边距（负数）之类的属性，以使背景 URL 图像在重复时相互重叠。

我现在使用的是 DIV 元素，在这个元素上应用负边距只会影响元素，而不是背景 URL 图片。

有什么办法解决这个问题吗？

HTML 上的当前代码

<body>
    <div class="bg"></div>
</body>

CSS 上的当前代码

<style>
    .bg{
        background: url('./pattern.png');
        background-size: 600px;
        width: 100vw;
        height: 100vh;
    }
</style>

上面代码的渲染结果：

提前致谢。

【问题讨论】：

为什么不更新 PNG 让它看起来像一个真正的模式？
developer.mozilla.org/en-US/docs/Web/CSS/background-position

标签： html css

【解决方案1】：

您可以使用多个背景图像，然后使用它们的位置使它们重叠。 https://developer.mozilla.org/en-US/docs/Web/CSS/background

.bg {
  background: url('https://picsum.photos/600'), url('https://picsum.photos/600');
  background-size: 600px;
  background-position: -100px bottom, left top;
  background-repeat: no-repeat, no-repeat;
  width: 100vw;
  height: 100vh;
}

&lt;div class="bg"&gt;&lt;/div&gt;

【讨论】：

我决定将您的解决方案应用于 .bg::before，这样我就可以在不改变文档流程的情况下更改和操作背景图像；）谢谢，Dominik！