html - 複数のセクションにまたがって画像を連続させるにはどうすればよいですか?

Question

簡単な HTML と CSS を使用していますが、目的の効果を実現する方法がわかりません。これが今の様子です。背景画像はコンテナ セクションの背景で、各赤いボックスはそのコンテナ内のセクションです。背景画像がボックス全体で連続している (つまり、繰り返されていない) のが好きですが、ボックス間のスペースには表示されないようにしたいと思います。これを達成する方法はありますか？

Answer 1

必要なものの詳細に応じて、いくつかの解決策があります。

スペースが小さく、ページ全体のどこにでも背景が必要な場合は、css を使用してボックスに境界線を適用できます。これにより、適用した背景の「上に」レンダリングされます。「TEAM」divにborder-rightを配置し、右上のdivにborder-bottomを配置すると、話している「分離」が作成されます。

赤で囲まれたセクションのみに背景が必要な場合は、背後の要素から背景を削除し、それを各 div に個別に適用することを検討してください。background-position を使用すると、ボックス間のスペースだけで区切られた 1 つの固体ピースのように背景を表示できます。

疑似 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 */
}