H2文本卡在後面，並沒有清除DIV彩色框

我正在一個客戶端網站上工作，並試圖讓H2字體不在我用來創建圖像背後的橙色框的背後。在發生這種情況時，我有一個相當不錯的把握，但似乎無法找出解決方案。所有幫助表示讚賞！H2文本卡在後面，並沒有清除DIV彩色框

   <div id="srleft"> 
       <div class="orangebox"><img src="images/quality.png" alt="quality service in portland and vancouver" /></div> 

       <h2>Quality</h2> 
       <p>With Over ---- Years of combined experience we promise great quality on all window installations.</p> 
      </div>

這裏是我的CSS代碼：

#srleft { 
position: relative; 
float: left; 
} 

.orangebox { 
height: 88px; 
width: 89px; 
border: 1px solid rgb(74, 74, 74); 
border-image-source: initial; 
border-image-slice: initial; 
border-image-width: initial; 
border-image-outset: initial; 
border-image-repeat: initial; 
position: absolute; 
top: 0px; 
bottom: 0px; 
left: 0px; 
right: 0px; 
background-color: rgb(240, 111, 38); 
border-radius: 0px; 
box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px; 
display: block; 
} 

.orangebox img { 
display: block; 
position: absolute; 
top: 0; bottom:0; left: 0; right:0; 
margin: auto; 

}

demo1 http://jonesbizzopp.com/hosted/Capture.PNG demo2 http://jonesbizzopp.com/hosted/Capture2.PNG

來源

2014-05-23 jjonesdesign

你能提供小提琴的例子嗎？ –

似乎沒有必要使用.orangebox {position: absolute;}？

來源

2014-05-23 07:37:31 konghou

似乎修復了刪除該問題的主要問題。我承認我有複製粘貼的代碼。我一直在使用CSS一段時間，但它似乎總是給我做一些棘手的事情。感謝您的反饋意見。 – jjonesdesign

如果div position: absolute;那麼肯定你的文本不會出現在該div的前面，所以我建議使用table而不是使用div來使背景變爲絕對。其更好地刪除position: absolute;或跟隨該代碼使得表，我希望將工作 LIKE一個例子

<!DOCTYPE html> 
<html> 
<title>HTML page</title> 
<body> 
<BODY BGCOLOR="Black"> 
<table width="750px" border="-100" height="230px"> 
<tr> 
<td colspan="3" style="background-color:orange;opacity:0.7;border-radius:20px;"> 
<h2>TEXT IN FRONT OF BACKGROUND COLOUR</h2> 
</td> 
</tr> 
</table> 
</body> 
</html>

來源

2014-05-23 07:41:48 Shashank

它的更好，如果你刪除position: absolute;，因爲由於該代碼只有它會隱藏這些內容，讓你只看起來像那個形象。

來源

2014-06-07 06:04:24

H2文本卡在後面，並沒有清除DIV彩色框

回答

相關問題