问纸张BG图像:使其显示为填充窗口
EN

Stack Overflow用户

提问于 2011-07-24 20:28:10

回答 2查看 400关注 0票数 0

我想使用一个像下面这样的背景图像作为一个网站的背景。问题是，我不想让它瓦片。我希望顶部边缘是窗口的顶部边缘，侧面边缘是窗口的侧面边缘，底部边缘是窗口的底部边缘。中间部分，无论是水平还是垂直，应该以自然的方式重复，以填满所有空间，使其看起来与浏览器窗口的大小相同。有什么好方法可以做到这一点吗？

发布于 2011-07-24 21:22:27

简单的解决方案:创建四个<div>：

具有顶部阴影的#top

带左阴影的#left

具有右侧阴影的#right

具有底部阴影的#bottom

<div id="top"></div>
<div id="left"></div>
<div> <!--Main content of site--> </div>
<div id="right"></div>
<div id="left"></div>

使用您喜欢的宽度和position:absolute设置样式，并使用原始背景图像的剪辑来填充它们，下面是一个示例：

#top{
    height:50px;background:transparent url("top-background.png") 0px 0px no-repeat;
}

然后，您只需对设置为<body>的background-image的原始背景图像的一个小网格剪辑进行repeat，如下所示：

body{
    background: transparent url("page-background.png") 0px 0xp repeat;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6806785

复制

相似问题

问纸张BG图像:使其显示为填充窗口EN