通过CSS裁剪背景图像

Question

所以，作为一名新手，我只是迷失在我想要做的事情上:在我需要为我的工作建立的网店上，我们正在使用一个用于Lightspeed (电子商务平台)的第三方模板。在这个主题中，我们有三个“突出”项目。这些是背景图像+重叠文本和按钮来显示产品。

我已经将这些ID的最小高度设置为800 to：

#highlight-1,#highlight-2,#highlight-3 {
   min-height: 800px;
}

到目前为止一切正常。但是现在，在移动平台上(是的，如果你想的话，你可以笑了，因为你知道接下来会发生什么？)，你已经猜到了:图像太大了。

我希望在纵向模式下将图像裁剪到移动平台大小的一半左右，因此图像的本质仍然保留下来，用户不必在到达页面末尾前滑动大约一公里。

在我可以访问的.rain和.css文件中，唯一能找到的是：

#highlight-1{ background: url('highlight_1_image.jpg') no-repeat;}
#highlight-2{ background: url('highlight_2_image.jpg') no-repeat;}
#highlight-3{ background: url('highlight_3_image.jpg') no-repeat;}

我可以编辑它，我可以访问模板的自定义.css编辑器

有谁能帮到新手吗？谢谢大家！)

Answer 1

理想的解决方案是使用媒体查询来提供较小的图像。这减少了可能使用有限数据的移动访问者的带宽，我相信这会对您在Google中的页面排名等产生影响。

#highlight-1{ background: url('highlight_1_image.jpg') no-repeat;}

@media screen and (max-width: 767px) {
    #highlight-1{ background: url('highlight_1_mobile_image.jpg') no-repeat;}
}

如果这不是一个选项，您可以使用background-size属性显式指定size，或者将其设置为cover (缩放或缩小，这样图像的单个实例将覆盖元素，如果需要的话)或contain (向上或向下缩放，使元素水平填充或垂直)。