填充（高达一定高度）div容器与背景图像

我有div容器中，我已放置在两个背景图象如下所示：填充（高达一定高度）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>

但我的要求是一样的图像如下图所示：

，将图片去掉

来源

2013-11-20 Abs

你能张贴小提琴吗？这对我们来说更容易调试 –

如果您的内容中有3个或更多的裁判，那么您预期会发生什么情况，那么倾斜的“参考”标签将被文本覆盖？ –

随着内容的增加，倾斜图像会消失。 – Abs

而不是使用两个背景图像的（这是不是真的符合逻辑，可能会非常棘手），你最好使用两个divs;把最大的集装箱（即＃test44）在relative位置，与相应的background-image

然后你就会把它absolute位置的另一格，将服务于偏移图像和位置（相对于其父）

这里是背景色的例子，以同样的用图片：jsfiddle

来源

2013-11-20 14:24:16

请检查我编辑的问题，我已添加jsfiddle链接。在您提供的小提琴中如果我将id替换为class并重复标记两次，我如何根据数据增长或缩小背景图像，以便这两个标记从不重叠。 – Abs

你必须使用固定尺寸，因为当你改变尺寸时，你还必须改变位置的坐标...... –

其实我没有选择使用固定尺寸的数据来自数据库，它可能更多或少。你看过我的小提琴吗？ – Abs

你可以在底部的第二图像绝对定位，通过使用下面的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之后创建一些额外的元素，你在这里用作图像。

来源

2013-11-28 10:13:07

这也很好:) –

填充（高达一定高度）div容器与背景图像

回答

相关问题