通过 CSS 裁剪背景图像

Posted 2023-02-25

【中文标题】通过 CSS 裁剪背景图像

【英文标题】：Cropping a background image through CSS

【发布时间】：2017-11-07 13:10:40

【问题描述】：

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

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

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

谁可以帮助新手？提前致谢！ :)

【参考方案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 属性显式指定大小，或将其设置为cover（按比例放大或缩小，以便图像的单个实例在需要时通过裁剪完全覆盖元素）或contain（按比例放大或缩小以使元素完全水平填充或垂直）

【讨论】：

我从没想过提供更小的图片。好主意啊！唯一的事情是..这会覆盖（或忽略）我为#highlight-# 设置的 800px 的最小高度吗？它会覆盖/替换其他背景图像，还是我需要使用某种 !important 标签？我自己从来没有真正使用过媒体查询，所以这对我来说是一个新领域。

媒体查询本身不会应用任何样式，因此无需担心您的min-height: 800px。将媒体查询视为样式表的一部分 - 只有当您的访问者满足媒体查询中指定的条件时，才会应用其中的规则。仅当您尝试在媒体查询中使用较弱的选择器时，才需要 !important。延伸阅读：***.com/tags/media-queries/info

太棒了！感谢您的额外解释和阅读材料，您是一个很大的帮助！不幸的是，我现在无法更改任何内容，但我会在明天发布更新。再次感谢！ :)

所以我已经听从了您的建议，移动图像的加载是完美的解决方案！我现在唯一遇到的问题仍然是 min-height: 800px 仍然缩放和主导图像。有什么方法可以仅为移动用户删除它？

是的，在媒体查询中，min-height: 0;