左和右背景圖片，在CSS

是否有可能使用一個圖像的背景下，和另外兩個人的左右？我知道這是可能的使用某種表，但我希望這是可擴展的。左和右背景圖片，在CSS

header {background-image: x.jpg left(y.jpg) right(z.jpg);}

是否有這樣的存在？

了桌子，我想這樣的事情是可能的：

<td background="x.jpg">Left side</td> 
<td background="y.jpg">Center, title.</td> 
<td background="z.jpg">Right side</td>

來源

2010-12-17 Captain Lightning

您可以將單個的背景（這可能是一個圖像）的單個元素。

如果你要三倍的背景，你需要三個要素，如果你希望這些元素出現並列，那麼你必須給他們定位並排（這是可以做到的任何數量的方式）的一面。您可以使用background-position來進一步處理元素背景的位置，您可能必須這樣做，因爲背景對齊完全是獨立的。

這個onyl原因適用於一個表格（除非表格的內容實際上是表格數據），這是因爲您有三個元素。

來源

2010-12-17 16:11:52 annakata

喜歡的東西：http://pastebin.com/bnnCQH6M？ – 2010-12-17 16:55:00

多個背景圖像即將到來，現在您可以使用CSS3 border-image支持的數量有限，但目前沒有良好的simgle元素，跨瀏覽器的方式去做吧。

來源

2010-12-17 16:20:40

我很期待它，但現在看起來像我將不得不使用表。 – 2010-12-17 16:59:04

如果您看到問題並將表格看作是唯一的答案，並且您爲我工作，您將立即可以說您*曾經爲*爲我工作。當您使用表格數據時，僅使用表* *。 – 2010-12-17 17:32:50

哈哈，我討厭桌子，就像下一個人一樣，我在開玩笑。但是，採取了點。 – 2010-12-17 18:43:08

這爲我工作：

#hb-header { 
height: 64px; 
vertical-align: middle; 
} 
#hb-header .headleft { 
float: left; 
width: 64px; 
height: 100%; 
background-image: url('HeaderLogoLeft.png'); 
background-repeat: no-repeat; 
background-position: 0 0; 
} 
#hb-header .headcenter { 
height: 100%; 
} 
#hb-header .headright { 
float: right; 
height: 100%; 
background-image: url('HeaderLogoRight.png'); 
background-repeat: no-repeat; 
background-position: right; 
} 


<div id='hb-header' class='hb-header ui-widget-header ui-corner-all'> 
    <div class='headleft'></div> 
    <div class='headright'> 
     <div style='margin-right: 72px;'> 
      Version ${buildNumber} 
      <div id='login' style='display:none;'><span id='login-user'></span> 
       <button type='button' id='logout' onclick="logout();" style='font-size:70%; line-height:1.0; padding:0.25em;'>Sign Out</button> 
      </div> 
     </div> 
    </div> 
    <div class='headcenter'> 
     <h3 style='margin-left:72px;'>Hello World</h3> 
    </div> 
</div>

來源

2013-01-04 22:39:11

左和右背景圖片，在CSS

回答

相關問題