Question

我有容器div，我在其中放置了两个背景图像，如下所示：

已删除图片

上图的CSS：

#test44{
background-image: url("images/reference_opt.png"),   url("images/content_opti11_opt.png");
background-position: 41px bottom, 82px 25px;
background-repeat: no-repeat, repeat-y;
background-size: 192px 292px, 1097px auto;
margin-bottom:10px;
min-height: 310px;

} 相应的标记：

<div id="test44">
<table>
<tr>
<td class="td">
<div >Reference 1</div></td>
<td>
<div class="content">
Your objective tells a prospective employer the type of work you are currently    pursuing. The rest of your resume should be designed to most effectively support your   objectivekuedyg djkhdbkd jd asjkds dkjdb
</div></td>
</tr>
</table>
</div>

但我的要求如下图所示：

已删除图片

Answer 1

不是使用两个背景图像（这不是真正的逻辑，而且可能很棘手），你最好使用两个div;将最大的容器（即＃test44）放在relative位置，并使用相应的background-image

然后你将放置另一个将用于偏移图像的div，并将其定位absolute位置（相对于其父级）

以下是背景色的示例，与图像的作用相同：jsfiddle

Answer 2

您可以使用以下CSS绝对将第二个图像放在底部：

#test44{
    background-image: url("images/content_opti11_opt.png");
    background-position: 82px 25px;
    background-repeat: repeat-y;
    background-size: 1097px auto;
    margin-bottom:10px;
    min-height: 310px;
    position: relative;
}

#test44:after {
    background-image: url("images/reference_opt.png");
    background-position: 41px bottom;
    background-size: 192px 292px;
    height: *height of image*;
    width: *width of image*;
    content: '';
    display: block;
    position: absolute;
    bottom: -something;
    left: 0;
}

即使内容越来越大，这应该很好地定位在底部。 :after函数在div之后创建了一些额外的元素，您在此处将其用作图像。

用背景图像填充（达到某个高度）容器div

2 个答案: