背景覆盖不适用于 IOS 上的仅一个 div

Question

尽管具有相同的精确样式，但第二个 div 不会在移动设备上显示完整的彩虹渐变图像，我真的不明白为什么。我希望底部框中的渐变与顶部的渐变相同，而不是随机停在黄色处。背景覆盖似乎不起作用，但仅适用于这一个div？？？

在桌面上正常工作错误地剪切背景图像

.navoutline {
 border: 2px solid black; 
 background-image: url('../img/rainbow.jpg');
 background-size: cover;
 background-repeat: no-repeat;
 width: 90%;
 padding-top: 10px;
 padding-bottom: 10px;
}

.bodyoutline {
  border: 2px solid black;
  background-image: url('../img/rainbow.jpg');
  background-size: cover;
  background-repeat: no-repeat; 
  width: 90%;
  padding-top: 10px;
  padding-bottom: 10px;
}

尽管完全相同，但它们在 IOS 上产生了 2 个不同的结果。 navoutline 显示正确，bodyoutline 不正确。

Answer 1

问题在于具有该背景的元素和图像本身的相对纵横比。

由于您使用了封面尺寸，在彩虹图像具有横向纵横比并且系统必须将其适合纵向元素的情况下，它需要使高度为元素的 100%，这意味着宽度得到为了保持 img 的纵横比也更大，所以你只能看到它的左侧。

此代码片段通过删除背景大小的覆盖物来解决这个问题，而不是要求背景图像的宽度始终是元素的宽度。

为了覆盖元素的整个高度，它重复向下的彩虹图像。

当然，这在这种特殊情况下有效，因为图像是可重复的。

<style>
  .bodyoutline {
    border: 2px solid black;
    background-image: url('https://i.sstatic.net/2qY8HjM6.png');
    background-size: 100% auto;
    background-repeat: repeat;
    width: 90%;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 80vh;
  }
</style>
<div class="bodyoutline"></div>

您还可以考虑不使用图像（如果其自然宽度不大于它可能必须覆盖的任何元素宽度，则图像可能会变得模糊），而是尝试使用线性渐变来获得彩虹效果，因为无论大小如何，它都会自动调整宽度。