Question

到目前为止，我已设法将背景图像拉伸：

XHTML：

<div id="background">
    <img src="images/background.jpg" alt="Background" />
</div>

CSS：

#background
{
    width: 100%;
    height: auto;
    position: fixed;
    left: 0px;
    top: 0px;
}

#background img
{
    width: 100%;
    height: 100%;
}

这很有效，除了当图像的高度超过窗口高度时从顶部显示图像。这意味着始终显示图像的顶部，但底部被切掉。我想更改此设置，以便始终从中心显示图像（以便图像的顶部和底部都被剪切掉，并显示图像的中心）。

Answer 1

Here is a good tutorial on creating a perfect full page background image。同样的概念也可以应用于任何ol'd3。

通常，作为背景图像的图像不应出现在标记本身中。您将演示文稿与内容混合在一起。

Answer 2

如果img标签不是绝对必要的，请删除它并在#background类中添加以下三行，

background-image:url(images/background.jpg);
background-position:center;
background-repeat:no-repeat;

第一行设置DIV的背景。第二行始终将其置于中心位置。第三行确保不重复背景，这是我通过查看HTML结构所需要的。

非常乐意进一步建议。

背景图像拉伸和作物

2 个答案: