Question

我使用了基础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

Answer 1

存在额外空间的原因是因为您已将标题高度静态设置为300px。同时，当您调整页面大小时，背景图像会缩放，因为它的大小是页面宽度的100％，当您使窗口变小/变大时，它会发生变化。

使高度相对于背景图像大小或使背景图像大小为静态。

Answer 2

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

不显示空白区域的简单方法（错误）：

background-size: auto 100%;

使用媒体查询（最佳）：

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

更好的解决方案：

不要在图片上使用文字，最好在html上书写，永远都要显示。

响应式CSS背景图像问题

2 个答案: