0

我有这张图片：

在此处输入图像描述

我试图拉伸页面的高度，然后水平重复。水平重复工作正常，但它没有垂直覆盖页面。

我已经尝试了 SO 中的几个示例，但没有得到我想要的结果。

这是我从另一篇文章结束的地方，但现在根本没有显示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
        background-image: url(bg-4a-24516.png);
        background-repeat: repeat-x;
        background-size: cover;
    }
    </style>

    </head>

    <body>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </body>

</html>

有什么建议么？

4

1 回答 1

0

实际上，您的示例在编码时可以正常工作。

背景图像正在被拉伸，并且可能难以辨别，具体取决于您的浏览器颜色渲染。

看下面的小提琴：

http://jsfiddle.net/audetwebdesign/yS4Uz

我已经拍摄了原始图像并在顶部和底部添加了彩色边框。

您可以在以下位置查看图片： http: //postimage.org/image/fsv80qegn/

当您使用 CSS3 属性background-size: cover时，背景图像会被拉伸，这会导致渲染失真，尤其是对于渐变。

body {
    background-image: url(http://s15.postimage.org/kriqf9i9n/sx_U5g.png);
    background-size: cover;
    background-repeat: repeat-x;
}

如果更改cover为contain您将获得另一种可能更适合其他应用程序的效果。

于 2013-03-11T17:30:57.993 回答