html - 响应式设计 HTML/CSS 中的固定背景

Question

我正在将静态页面转换为响应式页面，并且该页面具有固定的背景图像。我能想到的解决这个问题的唯一方法是重新制作图像，以便它可以随着屏幕的增加和减少而缩放。有什么想法、想法吗？

当前样式

body{
margin:0; 
font-family: Arial, Helvetica, sans-serif; 
font-size:12px;
color:#f1f1f1; 
background: #00171d url(../images/splash-images/body-bg.jpg) repeat-x fixed;
}

Answer 1

无需重新编辑图像，您需要为不同的屏幕尺寸制作多张图像。试试这个

固定 div，宽度和高度为 100%以及内部的图像文件也具有 100% 的宽度和高度像这样:

<style>
   #fixed_div { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; }
   #fixed_div img { width:100%; height:100%; }
</style>

<div id="fixed_div">
   <img src="img">
</div>

当浏览器调整大小时，代码将流畅地调整图像的大小。

使用 css 的 min-width、max-width、min-height 和 max-height 为图像设置边界。还可以使用 z-index 正确堆叠 div。