我正在将静态页面转换为响应式页面,并且该页面具有固定的背景图像。我能想到的解决这个问题的唯一方法是重新制作图像,以便它可以随着屏幕的增加和减少而缩放。有什么想法、想法吗?
当前样式
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;
}
最佳答案
无需重新编辑图像,您需要为不同的屏幕尺寸制作多张图像。 试试这个
固定 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。
关于html - 响应式设计 HTML/CSS 中的固定背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21715571/