CSS多個背景

我有一個網站，我想改變它的背景。我想把背景放在頂部和底部。CSS多個背景

這裏是CSS代碼：

 
div.bg_top { 
    background-image: url('bg_top.jpg'); 
    background-repeat: no-repeat; 
    background position: top center; 
} 

div.bg_bottom { 
    background-image: url('bg_bottom.jpg'); 
    background-repeat: no-repeat; 
    background position: bottom center; 
}

HTML代碼：

 
<div class="bg_top"> 
    <div class="bg_bottom"> 
    Content Here. 
    </div> 
</div>

是正確的？

來源

2010-03-19 Jorge

如果您修復background-position它應該工作：

background-position: center top;

來源

2010-03-19 05:37:36

實際上應該是'center top'。水平的首先，然後是垂直的。 – DisgruntledGoat 2010-03-19 12:49:29

@Disgruntled山羊 - 對不起，現在修復。大多數瀏覽器會按照任意順序正確渲染它，因爲這是一個常見的錯誤。 – 2010-03-19 15:23:13

你是對的 - 對於字符串值來說，這是真的，因爲不存在模棱兩可的可能性（'top'顯然是垂直的）。雖然順序對數字值是至關重要的。 – DisgruntledGoat 2010-03-20 01:21:24

我建議使用CSS速記最佳實踐

.bg_top { background: url('bg_top.jpg') no-repeat top center; } 

.bg_bottom { background: url('bg_bottom.jpg') no-repeat bottom center; }

來源

2010-03-19 06:08:12 pixeltocode

短手的使用不會自動使其成爲「最佳實踐」。不要打開「它讓你的樣式表變小」的說法。 – 2010-04-30 19:55:24

它可以幫助您快速查找CSS屬性，使代碼更具可讀性並在編輯時節省時間。如果這不是最佳做法，請賜教macek。 – pixeltocode 2010-05-01 09:30:49

由於蘭斯說只是改變background position:到background-position:它應該工作正常。

但我擔心的是，你給背景的方式，以不同的分辨率，兩個背景圖像可能會重疊，它會擰緊所有的設計。因此，要使其與所有需要選擇其他選項的分辨率兼容。我會建議使用任何圖像編輯器，並根據需要放置圖像並製作一張圖像，然後將該圖像用作背景。

來源

2010-03-19 12:35:44 Bipul

爲避免更改html，您還可以將其中一個背景放在html中，另一個放在body中。並使用最小高度（IE6的高度）來避免重疊。

來源

2010-03-19 13:02:23 jeroen

CSS多個背景

回答

相關問題