在一個div中使用兩個重複背景圖像

Question

我嘗試在x方向上使用兩個重複背景圖像作爲我的div。但是我不能。如何在我的div中使用X方向上的兩個重複圖像（即，我需要將我的單詞div分成兩個相等的部分。對於我的第一部分，我需要使用我的第一張圖片和背景重複-x，然後休息部分應該填充我的第二張圖片重複-x方向）。請幫助我

Answer 1

沒有你的代碼不能真的知道你要什麼，但我會做到這一點：

<div class="outer_div"> 
    <div class="left_half"></div> 
    <div class="right_half"></div> 
</div> 

<style> 
.outer_div{ 
    width: 500px; /*or whatever you need the width to be */ 
} 
.left_half{ 
    background-image: url("your image here") repeat-x; 
    width: 50%; 
    float:left; 
} 
.right_half{ 
    background-image:url("your image here") repeat-x; 
    width: 50%; 
    float:right; 
} 
</style> 

Answer 2

您將需要使用CSS3爲多個背景爲一個單個div。

HTML：

<div class="backgrounds"></div> 

CSS：

.backgrounds { 
    background: url(http://userlogos.org/files/logos/pek/stackoverflow2.png), 
       url(http://www.gravatar.com/avatar/3807b3e7ad69d363d4490540c663af5f?s=128&d=identicon&r=PG); 
    background-repeat: no-repeat, repeat; 
    background-position: center, left; 
    width: 700px; 
    height: 300px; 
} 

jsFiddle DEMO: Multiple Background For Single Div

編輯：修訂的jsfiddle爲repeat-x瞭解更多關於CSS3多背景HERE。