多背景位置

Question

我想問是否可以爲同一背景圖像聲明多個背景位置。

我有一個類名爲page_heading的跨度，我用這個類來展示同一個圖像兩次，一次在文本開始，一次在結尾。

HTML：

<h1><span class="page_heading">Text</span></h1> 

CSS：

.page_heading { 
    padding: 0 30px 0 30px; 
    background: #ff6600; 
    background: #ff6600 url('../img/star.png') no-repeat 0 50%; 
} 

我想做到這一點（我知道這是不對的，只是爲了瞭解）：

.page_heading { 
    padding: 0 30px 0 30px; 
    background: #ff6600; 
    background: #ff6600 url('../img/star.png') no-repeat 0 50%; 
    background: #ff6600 url('../img/star.png') no-repeat 100% 50%; 
} 

Answer 1

你可以使用多個背景的CSS3功能，將完全符合您的需求（browser support也不錯）。

background: url('../img/star.png') no-repeat 0 50%, 
      url('../img/star.png') no-repeat 100% 50%; 
background-color: #ff6600 

該解決方案的問題在於，在使用直接CSS的非符合瀏覽器中無法實現相同的效果。您可以考慮的回退措施是修改DOM結構以包含另一個包裝元素，該元素將採用HTML中的背景之一或者對Javascript執行相同的操作。在後一種情況下，請注意IE8（如果我沒記錯的話）如果無法解析它，則會拒絕整個background屬性。所以你會有CSS像

/* IE8: at least get one of the backgrounds */ 
background: url('../img/star.png') no-repeat 0 50%; 

/* CSS3 conformant browsers: both backgrounds; IE8 ignores this completely */ 
background: url('../img/star.png') no-repeat 0 50%, 
      url('../img/star.png') no-repeat 100% 50%;