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