html - 背景图像放大，裁剪但内容是静态的

Question

style{ background: url...}
<body>
  <div id = 'content'>
     BLABLABLABLABLBA
  </div>
</body>

我想知道如何设置背景图像（在 css 中）以确保如果我裁剪浏览器窗口，它将自动重新调整。但内容需要修复。

谢谢

score 0 · Accepted Answer

http://css-tricks.com/上的一篇文章叫做perfect-full-page-background-image的文章将有助于找出您的问题。他给了你所有不同的方法。

顺便说一句，您只需要将#content 的宽度保持为固定宽度。

score 0 · Accepted Answer

这是一个jsFiddle，它演示了在外部 div 中使用固定大小position:fixed而在内部 div 中保存图像的过程background-size:contain。

编辑：现在一个额外的 div 也用于包含任何边框要求！
EDIT-2：更新了 jsFiddle :contain，而不:cover是非抽象图像。

对于IE6-8等旧浏览器，有许多插件可供选择，允许使用CSS3 样式。这个名为backgroundSize.js的jQuery 插件专门供SO 成员Louis-Rémi:cover使用和:contain提供，如果您需要该选项。background-size

2 回答 2