Question

我的妻子正在为她的网站暂时使用封面 - 我们想要在移动设备上使用不同于桌面的背景图像。我是一个完整的初学者，但通过封面页的高级设置选项卡注入了CSS，并插入了以下内容：

    <style>
    @media screen and (max-width: 480px) {
         body {
              background-image:url('http://s30.postimg.org/kqqdomkep/Ivy_Row_Icon_BACKGROUND_v2.jpg');
         }
    }
    </style>

它不起作用。我究竟做错了什么？任何人可以提供的帮助都将非常感激。

如果需要，我可以提供网站网址。

Answer 1

您正在使用640x1136px背景图片，用于比480px更窄的屏幕而不调整背景大小。此外，您的图像顶部有一个大的空白区域。我认为图像加载但是你只看到图像的顶部，得出它没有加载的错误结论。

这应该在小型设备上显示图像：

@media (max-width: 480px) {
  body {
    background: 
      white
      url('http://s30.postimg.org/kqqdomkep/Ivy_Row_Icon_BACKGROUND_v2.jpg')
      no-repeat 
      center 
      /contain;
    min-height: 100vh;
    margin: 0;
  }
}

关键是/contain简写的background部分，也可以单独写为background-size: contain;
其他可能的值包括：

cover（图片被裁剪但覆盖了元素），
Length （px，em，rem，vw，cm，{{1等等......），
in（原始大小 - 也是默认值 - 您现在看到的内容），
auto（重置为初始状态）
initial（申请父母的财产）

Squarespace - 手机上的不同背景图片？使用带有Mission模板的封面

1 个答案: