擴展一個DIV的背景超出其界限

我知道這是很常見的，延長一個div的背景以外的含元素的寬度，以例如一個導航條。到目前爲止，我已經使用了填充和邊距的混合，並且它似乎工作得不錯。擴展一個DIV的背景超出其界限

不過，我想擴展包含圖像的div的背景：

<div class="row-fluid box"> 
<img src="image.jpg"/> 
</div> 

.box{ 
background:red; 
padding-right:100em; 
padding-left:50em; 
margin-left:-50em /*The background won't move left without setting the margin like 
this for me*/ 
}

當我這樣做，圖像變得非常小（高度和寬度），以被點無形。這不會發生在使用完全相同的CSS樣式的文本中。

我使用的是引導，並給予DIV一類行流體（已包含文本的div工作完全相同的一組上）的。

任何幫助，將不勝感激！

來源

2013-03-04 Matthew Shaw

Ummmm ......這不是一個背景，這是一個嵌入式圖像。 – 2013-03-04 18:19:24

對不起，我不知道我理解。你能告訴我如何做不同嗎？我只是想有一個真實包含在正常的容器內，但堅決反對它擴展了瀏覽器的全寬度的背景色的圖像。如果我從div中移除圖像，那麼背景顏色會根據需要擴展整個寬度。 – 2013-03-04 18:28:54

使用CSS背景圖像。請參閱：http://stackoverflow.com/search?q=css+background+on+body – 2013-03-04 18:46:53

我發現最簡單的方法是將背景應用於引導容器外部的div，如下所示：http://jsfiddle.net/panchroma/qFtNT/。

人們很容易想象發生了什麼，它的靈活，和CSS是乾淨多了。

記得有什麼可從關閉和打開引導容器div的次數爲更復雜的背景佈局阻止你。

HTML

<div class="wideBackground"> 

<div class="container"> 
<div class="row-fluid"> 
..... 
</div> <!-- close row-fluid --> 
</div><!-- close container --> 

</div><!-- close wideBackground -->

CSS

.wideBackground{ 
background-color:red; 
}

來源

2013-03-04 19:45:38

擴展一個DIV的背景超出其界限

回答

相關問題