Question

我使用bootstrap并且我有一张背景图片。它由CSS设置实现基本上是一种视差。一切正常，但图片尺寸为4066 x 4066，因此我将尺寸设置为background-size: 36%。问题在于响应式视图：在手机上看起来很小。知道如何解决这个问题吗？

您可以查看下面的代码：

#home{
  background-size: 36% !important;
  background-position: 50% 26% !important;
  background: url('/assets/img/light_green2_home.png')  no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  display: block;
  position: relative;
  height: 520px;
}

Answer 1

您可以使用（对于小于600像素的屏幕）：

@media all and (max-width: 600px) {

     #home{
       background-size: 50% !important;
    }

}

Answer 2

您正在实施响应式背景图像。考虑在媒体查询集上使用max-width来调整background-size: "some percentage"。我建议使用background-size:cover作为原始图片，这样可以确保您的图片填充元素而不会重叠或“重叠”。

#home {
  background-size: cover;
}

@media all and (max-width: "some number"px) {
  #home {
    background-size: 60%;
  }
}

关于CSS媒体查询的一些阅读here。

我建议不要针对特定的设备尺寸，而是将max-width设置为刚开始看起来太小的时候。

背景图片 - 响应问题CSS

2 个答案: