纸张BG图像:使其显示为填充窗口
纸张BG图像:使其显示为填充窗口
提问于 2011-07-24 20:28:10
我想使用一个像下面这样的背景图像作为一个网站的背景。问题是，我不想让它瓦片。我希望顶部边缘是窗口的顶部边缘，侧面边缘是窗口的侧面边缘，底部边缘是窗口的底部边缘。中间部分，无论是水平还是垂直，应该以自然的方式重复，以填满所有空间，使其看起来与浏览器窗口的大小相同。有什么好方法可以做到这一点吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-07-24 20:30:20
我会使用这样的东西：http://srobbin.com/blog/jquery-plugins/jquery-backstretch/ (注意这不是唯一的背景拉伸脚本)，优点是它保持了图像的纵横比。
不知道在你的情况下保持宽高比是必要的还是可取的..？
如果我想在这个背景下走得更远，我会：
- 获取基本网格及其表面结构，并在整个站点中重复该步骤bg。
- 获取两侧的“阴影”，并将它们固定在每一侧，将它们重复到所需的任何方向。
如果我将所有这些元素都放在它们自己的层中。虽然这并不难制造。
Stack Overflow用户
发布于 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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6806785
复制相关文章
相似问题
腾讯云开发者
