html - 如何使图像在多个部分之间连续，中间有中断？

Question

我正在使用一些简单的 HTML 和 CSS，但我不知道如何实现我想要的效果。 Here's how it looks right now.背景图像是容器部分的背景，每个红色框是该容器中的一个部分。我喜欢背景图像在方框之间是连续的(即不重复)，但我希望它不要出现在方框之间的空间中。有办法实现吗？

Answer 1

有几种解决方案，具体取决于您想要的详细信息:

如果空间很小，并且您希望整个页面的每个地方都有背景，您可以使用 css 将边框应用到您的框，这将在您应用的背景“之上”呈现。将 border-right 放在“TEAM”div 上，将 border-bottom 放在右上角的 div 上，将创建您所说的“分隔”。

如果你只想要红色框内的部分背景，可以考虑去掉后面元素的背景，分别应用到每个div上。通过使用 background-position，您可以使背景看起来像一个整体，仅由框之间的空间分隔。

示例伪 CSS:

div.team,
div.top_right,
div.bottom_right {
    background: transparent url(image/my_bg_image.jpg) 0 0 no-repeat;
}

div.top_right {
    background-position: -500px 0; /* assumes the team div was 500px wide */
}

div.bottom_right {
    background-position: -500px -250px; /* assumes the top_right div is 250px tall */
}