使用背景图片填充(至一定高度)容器div

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>

但我的要求就像下面展示的图片一样： < p > < strong > 图片已删除

- ABC

---

你能发一个 JSFiddle 吗？这样我们就更容易调试了。 - Jérémy Dutheil

如果您的内容中有3个或更多的引用，那么您期望会发生什么？斜体的“Reference”标签会被文本覆盖吗？ - Marc Audet

随着内容增加，倾斜的图像会向下移动。 - ABC

Answer 1

不要使用两个背景图片（这并不是很合理，也可能会有些棘手），最好使用两个div；将最大的容器（即#test44）放在相对位置，与相应的背景图片一起。

然后，您将放置另一个div，用于偏移图像，并将其定位为绝对位置（相对于其父级）。

下面是一个使用背景颜色的示例，使用图像的方式相同：jsfiddle

- Jérémy Dutheil

---

请检查我的编辑后的问题，我已经添加了jsfiddle链接。如果我用class替换id并重复标记两次，如何根据数据调整背景图像的大小，以便这两个标记永远不会重叠。 - ABC

你必须使用固定的尺寸，因为当你改变大小时，位置坐标也必须相应更改... - Jérémy Dutheil

其实我没有选择使用固定大小，因为数据来自数据库，可能会多也可能会少。你看过我的fiddle吗？ - ABC

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 后面创建一些额外的元素，在这里你将其用作图像。

- Sander Koedood