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彩色框

回答

相关问题