响应式 CSS 背景图像问题答案

【问题标题】：Responsive CSS Background Image Issue响应式 CSS 背景图像问题
【发布时间】：2014-01-14 13:10:46
【问题描述】：

我使用foundation 5 框架来设计页面。它在背景图像的顶部放置了一个徽标。链接：Demo Page

这两张图片的样式是：

header {
    position: relative;
}
.logo {
    background: url("../img/text2save.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    z-index: 2;
    width: 20%;
    height: 80px;
}
header div {
    background: url("../img/banner.jpg");
    background-repeat: no-repeat;
    height: 300px;
    background-size: 100%;

}

问题：当浏览器缩小时，背景图像会在其下方留下空白区域，即另一个元素会向下移动。我想不出解决办法。

网站：http://text2save.tushark.com.np

【问题讨论】：

标签： html css responsive-design zurb-foundation

【解决方案1】：

之所以有多余的空间是因为您已将标题高度静态设置为 300 像素。同时，当您调整页面大小时，背景图像会缩放，因为它的大小是页面的 100% 宽度，当您将窗口变小/变大时，它会发生变化。

要么使高度相对于背景图像大小，要么使背景图像大小静态。

【讨论】：

感谢您的指导。我使用了不同的媒体查询并更改了各个查询的高度样式。

【解决方案2】：

问题是因为您在 div 上使用了静态高度

不显示空格的简单方法（坏）：

background-size: auto 100%;

使用媒体查询（最佳）：

@media (max-width:500px) {
    header div{
    height : 150px;
  }
}

还有一个更好的解决方案：

不要在你的图片上使用文字，最好写在 html 上，永远都会显示出来。

【讨论】：