0

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

4

1 に答える 1

0

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

スペースが小さく、ページ全体のどこにでも背景が必要な場合は、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 */
}
于 2013-08-03T16:05:06.660 に答える