Question

我正在客户网站上工作并试图让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

Answer 1

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

Answer 2

如果您删除position: absolute;会更好，因为由于此代码，它只会隐藏这些内容并让您看起来只是该图像。

Answer 3

如果div position: absolute;那么肯定你的文字不会出现在那个div之前那么我建议用div制作表格而不是背景并使其绝对。最好删除position: absolute;或遵循此代码制作表，我希望它能够正常工作比如一个例子

<!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>

H2文字卡在后面，没有清除DIV彩色框

3 个答案: