html - How can I make an image continue across multiple sections with breaks in between?

Question

I'm working with some simple HTML and CSS, but I can't figure out how to achieve the effect I'm going for. Here's how it looks right now. The background image is the background for a container section and each red box is a section within that container. I like that the background image is continuous across the boxes (i.e. doesn't repeat), but I'd like it to not show up in the space between the boxes. Is there a way to accomplish this?

Answer 1

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

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

如果您只想要红色部分中的背景，您可以考虑从后面的元素中删除背景，并将其分别应用于每个 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 */
}