通过CSS裁剪背景图像

所以，作为一个新手，我只是迷失在我想做的事情中： 在我需要为我的工作设置的网店上，我们正在使用Lightspeed（电子商务平台）的第三方模板。在这个主题中，我们有3个“亮点”项目。这些是背景图像+重叠文本和显示产品的按钮

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

#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编辑器

---

有谁能帮助新手吗？提前谢谢大家！：）

理想的解决方案是使用媒体查询来提供较小的图像。这降低了移动访问者的带宽，他们可能使用有限的数据，我相信这会影响你在谷歌等网站上的页面排名

#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

属性显式指定大小，或将其设置为

cover

（放大或缩小，这样图像的单个实例将完全覆盖元素，并进行裁剪（如果需要）或

contain

（放大或缩小以使元素在水平方向上完全填充或垂直方向上完全填充）

我从来没有想过要提供更小的图像。这是个好主意！唯一的问题是..这会覆盖（或忽略）吗我的#highlight-#的最小高度为800px，它会覆盖/替换其他背景图像吗，或者我需要使用某种！重要标记吗？我自己从来没有真正处理过媒体查询，所以这对我来说是一个新领域。媒体查询本身不应用任何样式，所以无需担心

最小高度：800px

。将媒体查询视为样式表的一部分-只有当访问者满足媒体查询中指定的条件时，才会应用其中的规则。

！重要信息

仅当您尝试在媒体查询中使用较弱的选择器时才是必需的。进一步阅读：真棒！感谢您的额外解释阅读材料，你帮了大忙！不幸的是，我现在无法更改任何内容，但我明天会发布更新。再次感谢！：）所以我一直在跟进你的建议，手机图像的加载是一个完美的解决方案！我现在唯一的问题仍然是最小高度：800px，它仍然在缩放和控制图像。我有没有办法只为移动用户删除它？是的，在媒体查询中，

minheight:0