Question

我继承的网站使用精灵来制作一些基于设计的图像。精灵高28px。最近开始，当在Chrome中查看网站时，当具有背景的容器的高度> 1时，精灵不会显示在元素上。 28px。

我能够使用下面的代码片段重现这一点。

如果我创建一个更窄的图像，我特别奇怪，我没有这个问题。断点似乎是宽度：16384px或2 ^ 14。

.outer {
  width: 1000px;
  background-color: skyblue;
}

.bg {
  background: url('https://i.imgur.com/DEV7k42.png');
}

<div class='outer'>
  <div class='bg'>
    <div style='height:28px'>
       See this nice background?
    </div>
  </div>
</div>

<div class='outer'>
  <div class='bg'>
    <div style='height: 29px;'>
        No background here
    </div>
  </div>
</div>

这使用宽度为16384像素的图像：

.outer {
  width: 1000px;
  background-color: blue;
}

.bg {
  background: url('https://i.imgur.com/1vd6POs.png');
}

<div class='outer'>
  <div class='bg'>
    <div style='height: 29px;'>
      this image is 13684px wide
    </div>
  </div>
</div>

这使用宽度为13685像素的图像：

.outer {
  width: 1000px;
  background-color: blue;
}

.bg {
  background: url('https://i.imgur.com/KV0uyia.png');
}

<div class='outer'>
  <div class='bg'>
    <div style='height: 29px;'>
       This uses an image that is 16385px wide
    </div>
  </div>
</div>

这可能是个错误吗？我做了一个快速谷歌搜索，找不到任何迹象表明图像的尺寸有硬性限制。

Answer 1

我简化了结构并将bg image和color放在了外div上。似乎工作：

.outer {
  width: 1000px;
  height: 28px;
  background: url('https://i.imgur.com/DEV7k42.png');
  background-color: skyblue;
}

<div class='outer'>
  <div style='height:28px'>
    See this nice background?
  </div>
</div>

<div class='outer'>
  <div style='height: 29px;'>
    No background here
  </div>
</div>

当div高度大于图像高度时，CSS背景图像不会显示在Chrome中

1 个答案: