[英]Making a div content to “bleed” on the bottom (or prevent the background image to render)
Okey so basically I have: Okey,所以基本上我有:
<div id="content">
... content of arbitrary size ...
</div>
<div id="content_bottom"></div>
The style is: 样式是:
#content {
background: transparent url(content_tile.png) center top repeat-y;
width: 800px;
}
#content_bottom {
background: transparent url(content_bottom.png) center top no-repeat;
height: 200px;
width: 800px;
}
content_tile.png
is a 800x1
image (tiles vertically), and has transparency. content_tile.png
是800x1
图像(垂直平铺),具有透明度。 content_bottom.png
is a 800x200
image. content_bottom.png
是800x200
图片。
Basically, I need to have the content_bottom.png
image to replace the #content
background image only on the bottom. 基本上,我需要用
content_bottom.png
图像替换仅底部的#content
背景图像。 Having a negative margin on #content
almost works, but since both images are transparent images, they overlap, and it should not happen. #content
的负边距几乎可以工作,但是由于两个图像都是透明图像,因此它们会重叠,因此不应该发生。
I think that I need to make #content
not to render its background on the last 200px on its bottom. 我认为我需要使
#content
不要在其底部的最后200 #content
处渲染其背景。 Any idea how I could do that ? 知道我该怎么做吗?
If you altered your markup slightly and used javascript you could do it with an absolutely positioned div that contained only the background. 如果您稍微更改了标记并使用了javascript,则可以使用绝对定位的div(仅包含背景)来完成此操作。 Then onload, set #repeating-background's height to (#content's height - 200px):
然后加载,将#repeating-background的高度设置为(#content的高度-200px):
HTML 的HTML
<div id="content">
<div id="text">
This is where your content would go
</div>
<div id="repeating-background"></div>
</div>
CSS 的CSS
#content {
position: relative;
width: 800px;
background: url(content_bottom.png) left bottom no-repeat;
}
#text {
position: relative;
z-index: 2;
}
#repeating-background {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 800px;
height: 1px;
background: url(content_tile.png) left top repeat-y;
}
Javascript (jQuery) Javascript(jQuery)
$(document).ready(function() {
$('#repeating-background').height($('#content').height() - 200);
});
创建一个嵌套在#content中的第三个div,高度为200px。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.