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

Question

这是我的：

.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;
}

<div class="slot" style="width:345px; background-size: 62px, auto;"></div>

这是结果：

slot with bg image

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

slot with no bg image

有趣的是，如果我们增加 div 的高度，那么我们可以获得更大的背景尺寸，并且仍然可以看到背景图像。

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

请帮忙！

编辑： 看来我只能在 Google Chrome、Avast 浏览器和 Opera 上重现此问题。它在 Mozilla Firefox 和 Microsoft Edge 上运行良好。无法在 Safari 上检查。另外我觉得这在 Chrome 之前是有效的，它可能是最近的事情？但我不能确定。

Answer 1

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

这是特定于浏览器的实现，如果您在 Firefox 上检查，它会正常工作，但在 chrome 上它不起作用。

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

Answer 2

这是我的看法。

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

这可能是 CSS3 的副作用。即，

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

我认为在设计（CSS 功能）期间没有应用任何特定逻辑来使其像这样工作。

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

知道background中给定的auto实际上等于width，相应地确保background-height小于元素高度的两倍

或

如果适用于您的用例，请使用不重复

Answer 3

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

应该在背景大小属性中使用 100% 而不是 auto 作为 y 的值：

background-size: 63px 100%;

解决方案#2：

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

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

然后我们可以为y设置固定高度的背景大小:

background-size: 63px 31px;

并且背景重复属性需要设置为不重复:

background-repeat: no-repeat;

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

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

Increasing the background-size in CSS makes the background image disappear

html

css

background

background-image

background-size

这是我的看法。

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