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

现在，当background-size属性更改为大于62px时，问题就来了。例如，当像素变为63px或更高时，背景图像就会消失：

slot with no bg image

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

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

请帮助！

编辑：看来我只能在Google Chrome，Avast Browser和Opera上重现此问题。它可以在Mozilla Firefox和Microsoft Edge上正常运行。无法在Safari上检查。我还觉得这以前在Chrome上可以运行，可能是最近发生的事情？但是我不能确定。

Answer 1

实际情况是-您将一个像素的图像拉伸到63px，并且以这种比例拉伸会导致其消失，因为浏览器无法执行该操作。

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

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

Answer 2

这是我的看法。

您给的背景高度为62px（您给定了auto，但由于它是方形图像，所以它与宽度相同），div的高度为31px。就是说，您的背景高度是元素高度的两倍），并且您给了背景重复号。

这可能是CSS3中的副作用。

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

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

您当前情况下的解决方案将是

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

或

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

Answer 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％的解决方案更简单。

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

3 个答案:

这是我的看法。

您当前情况下的解决方案将是