使用一個CSS的多背景

我想使用多個圖像作爲背景。
例如：索引頁 - 汽車圖像，關於我的頁面 - 記事本圖像使用一個CSS的多背景

我試圖添加以下代碼：

body { 
    background:url(images/big_03.jpg), url(images/big_02.jpg),url(images/big_01.jpg); 
    background-repeat:no-repeat; 
    background-size:cover; 
}

但我不知道怎麼切換他們。我如何選擇使用哪個圖像作爲背景？

來源

2014-02-14 user1900665

y我們的菜單呢？或者你有內容的容器？ – deW1

-1

如果你使用靜態Html你可以給你的身體元素或外部包裝類。例如：

首頁

<body class="homepage"> 

</body>

的公司簡介頁面

<body class="about_us"> 

</body>

，並設置CSS

.homepage { 
background-image : url('../path/to/image.jpg'); 
} 

.about_us { 
background-image : url('../path/to/image.jpg'); 
}

等每個頁面。

您當前的CSS選擇了全球性機構的工作，

body { 
background:url(images/big_03.jpg), url(images/big_02.jpg),url(images/big_01.jpg); 
background-repeat:no-repeat; 
background-size:cover; 
}

這種類型的CSS的工作如果u希望頁面上使用多個背景圖片，而不是由不同BG的每一頁。

來源

2014-02-14 23:57:50

嗨，你可以使用一種叫做「CSS Sprites」的技巧。簡而言之，您可以使用精靈生成器工具http://spritepad.wearekiss.com/將所有圖像合併爲一個大圖像。接下來，您更改大圖像中的背景位置以獲取元素的背景圖像。

您可以瞭解更多從here

來源

2014-02-14 23:59:23

使用精靈的優點是可以在一個HTTP請求中獲取加載的許多圖像。對這種情況使用精靈將會造成更多的傷害，而不是更好，因爲每個特定頁面只會使用其中一個背景。因此，背景的精靈會無緣無故地增加圖像下載大小（減慢頁面加載時間）。 – t8tortotlover

我不同意！她試圖爲頁面上的每個元素設置圖像，即使您在多個頁面中使用圖像，使用Sprite也會有所幫助。看看我的答案中的鏈接。 –

您可以通過每個<body>標籤設置與特定的ID做到這一點，然後分別風格的ID在CSS的：

<body id="home"> </body>

CSS

#home{ 
    background-color: red; 
    //or image, whatever properties you want 
}

http://jsfiddle.net/

來源

2014-02-15 00:00:57 leigero

您可以爲每個頁面的body元素添加一個特殊類，併爲每種情況指定不同的背景圖像。

HTML：

<body class="home"> 
    ... 
</body> 

<body class="about"> 
    ... 
</body>

CSS：

body.home{ 
    background: url(car.jpg); 
} 

body.about{ 
    background: url(notepad.jpg); 
}

來源

2014-02-15 00:01:24 t8tortotlover

據我所知，你有三種選擇：

1）編碼到HTML。爲此，請將頁面中的<body>更改爲 <;body style="background-image: url(<url of image>); background-repeat: no-repeat; background-size: cover;">。

我認爲這是次優的，因爲這意味着很多在不同的地方打字，如果你想改變背景 - 重複重複-Y而忘記更改一個或多個頁面，可能會導致不一致。。

2）使用「迷你樣式表」由一個規則指定每個頁面的背景。我認爲這不是一個很好的解決方案，因爲伴隨着1）提出的問題，您還必須處理另一個HTTP請求，這會減慢頁面加載速度。。

3）使用不同的ID每個體元件（所以你<body>將成爲<body id="home">，<body id="about">，或其他任何東西，我認爲這是最好的解決方案，因爲它可以讓你收集所有的代碼在一個地方：

body { 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

body#home { 
    background-image: url(<home image url); 
} 

body#about { 
    background-image: url(<about image url); 
}

此代碼可能會停留在所有頁面中鏈接到的樣式表中，因此您不會以任何額外的HTTP請求結束。如果要更改身體屬性/值對之一不必經過大量文件更改每一個，你只需要改變一個。

來源

2014-02-15 00:53:35 wec

使用一個CSS的多背景

回答

相關問題