0

http://www.gardencrafts.c​​o.uk/index.htm

在上面的链接中，背景有一片叶子一直延伸到身体的中间！我想要的是将整个图像分成三个部分。页眉，内容和最后的页脚。我裁剪了标题所需的部分，但问题是叶子给背景图像的高度为 600 像素。标题高度为 150 像素，因此背景的多余部分被隐藏。

我尝试在 CSS 中显示 Overflaw，但它不起作用。如何在不更改标题 div 高度的情况下让图像显示其全部内容？

这是当前标题 DIV 的 CSS 代码。

  #header{
background-image: url(../images/top-bg.png);
background-repeat: no-repeat;
margin: 0 auto;
width: 1000px;
height: 200px;
overflow: visible;
}
4

2 回答 2

0

我认为您必须将该背景应用于标题的父容器，但为了为您提供更好的答案，我们需要查看您的代码

于 2013-02-02T08:01:50.687 回答
0

这可以通过多种方式解决，以下是其中一种解决方案：

给出页面#body的完整原件background-image，包括落叶。

使用正确的background-position，您可以将 的上半部分#header与 的下半部分合并#body。

看看：JSFiddle

HTML

<div id="header">
</div>
<div id="body">
</div>

CSS

#header
{
    background-image:url("https://twitter.com/images/resources/twitter-bird-white-on-blue.png");
    width:300px;
    height:150px;
    border-style:none;
    border-left-style:solid;
    border-right-style:solid;
    border-color:yellow;
}
#body
{
    background-image:url("https://twitter.com/images/resources/twitter-bird-white-on-blue.png");
    width:300px;
    height:300px;
    background-position: 0px -150px;
    border-style:none;
    border-left-style:solid;
    border-right-style:solid;
    border-color:red;
}

但是，这将允许background-image重复自身（如果您不停止它），之后将显示另一片叶子。

于 2013-02-02T08:19:13.613 回答