在 CSS 中增加 background-size 会使背景图像消失答案

【问题标题】：Increasing the background-size in CSS makes the background image disappear在 CSS 中增加 background-size 会使背景图像消失
【发布时间】：2019-04-25 03:58:11
【问题描述】：

这就是我所拥有的：

.slot {
  border: 1px solid;
  border-color: rgba(90, 90, 90, 1);
  height: 31px;
  background: url(https://i.imgur.com/r6ihXJe.png), rgba(150, 150, 150, 1);
  background-position-x: center !important;
  background-repeat: repeat-y, no-repeat !important;
}

&lt;div class="slot" style="width:345px; background-size: 62px, auto;"&gt;&lt;/div&gt;

这是结果：

slot with bg image

现在，当 background-size 属性更改为超过 62px 时，问题就出现了。例如，当它变为 63px 或更多时 - 背景图像消失：

slot with no bg image

有趣的是，如果我们增加 div 的高度，那么我们可以拥有更大的 background-size 并且仍然可以看到背景图像。

这是我制作的一个 jsFiddle：https://jsfiddle.net/avc4y3h0/

请帮忙！

编辑：看来我只能在 Google Chrome、Avast 浏览器和 Opera 上重现此问题。它在 Mozilla Firefox 和 Microsoft Edge 上运行良好。无法在 Safari 上查看。我也觉得这以前在 Chrome 上工作过，它可能是最近的东西？但我不能确定。

【问题讨论】：

背景大小应该用逗号分隔两个值 - 尝试删除它，看看是否能解决问题
对不起上面应该说不应该有逗号
使用100%而不是自动
@Pete 感谢您的评论。我试过了，但没有解决问题。
@TemaniAfif 实际上使用 100% 可以解决问题。谢谢！我首先尝试了另一个解决方案，即我从 vishwaovi 获得的想法，这就是为什么我将他的答案标记为解决方案。也许我会写一篇包含 2 个解决方案的帖子 - 对 y 使用 100% 的解决方案更简单。

标签： html css background background-image background-size

【解决方案1】：

实际发生了什么 - 您正在将一个像素图像拉伸到 63 像素，并且以这样的比例拉伸会导致它消失，因为浏览器无法执行该操作。

这是特定于浏览器的实现，如果您在 Firefox 上进行检查，它会正常工作，而在 chrome 上则无法正常工作。

您可以完成相同的操作 - 使用相同的图像作为 .slot 子项的背景（重复 x 和 y 两者）（为此子项设置高度、宽度和边距）

【讨论】：

感谢您的回答。我找到了解决问题的方法，方法是使用 y 的固定高度并且不重复。

【解决方案2】：

所以这是我的看法。

你给背景高度 62px（你给了 auto 但它与宽度相同，因为它是一个方形图像）和 div 的高度为 31px。意思是，你的背景高度是元素高度的两倍）并且你已经为背景给出了 repeat-y。

这可能是 CSS3 中的副作用。也就是说，

如果背景图片是元素高度（或宽度）的两倍，并且在 y 方向（或 x）上重复，则不会显示背景。

我不认为在设计过程中应用了任何特定逻辑（CSS 功能）以使其像这样工作。

您当前方案的解决方案是，

知道背景中给出的 auto 实际上等于宽度，因此请确保 background-height 小于元素高度的两倍

或

如果适合您的用例，请使用 no-repeat

【讨论】：

谢谢，您的回答帮助我找到了解决方案。我的解决方案是使用 1 x 31 像素行的图像，而不是 1 x 1 像素的图像。我设置了 background-repeat: no-repeat;和背景尺寸：63px 31px；这解决了我的问题，因为“插槽” div 永远不会改变它的高度。

【解决方案3】：

解决方案 #1：（感谢 Temani Afif 的评论）

应在 background-size 属性中使用 100% 而不是 auto 来表示 y 的值：

background-size: 63px 100%;

解决方案 #2：

感谢vishwaovi的回答，我想出了这个主意。

我们可以使用一行 1 x 31 像素（或其他固定高度）的背景图片，而不仅仅是单个像素。

然后我们可以为y设置固定高度的背景尺寸：

background-size: 63px 31px;

并且需要将 background-repeat 属性设置为 no-repeat：

background-repeat: no-repeat;

这也适用于我，但显然第一个解决方案只是将 y 的值设置为 100% 更简单。

【讨论】：