Chrome 背景图片问题

Question

我有三个 div 标签用于显示 header 图片。

第一个 div 将左对齐徽标
第三个 div 将右对齐徽标
并且中心 div 应该重复空白背景图像以适应屏幕宽度。

我已经为中心 div 标签设置了 100% 的宽度。它在 IE 中工作，而在 Chrome 中，中心标记扩展了屏幕宽度。背景图像将屏幕宽度扩展为第一个和最后一个 div 标签的长度。例如，如果第一张和最后一张图片是 20%，我希望中心 div 调整 60%，但在 Chrome 中，第一张和最后一张图片为 140% 20 + 20，中间为 100%标签。

需要帮助！

Answer 1

我认为您的 css 是问题所在。好好看看这个片段。工作正常。 :)

.left {
  width: 9%;background-image:url("http://www.rachelgallen.com/images/skype.jpg");  background-repeat:no-repeat;background-position:top left;}
  .right {
    width: 9%;background-image:url("http://www.rachelgallen.com/images/email.jpg");  background-repeat:no-repeat; background-position:top right;}
    .middle {
      width: 80%;background-image:url("http://placehold.it/400x400"); background-repeat:repeat-x; height:150px; background-size:contain;}
      header {
        width: 100%;
        height: 150px;
        vertical-align: top;
        margin: 0!important, padding: 0!important;
      }
      .left,
      .right,
      .middle {
        display: inline-block;
        height: 150px;
      }

<header>
  <div class="left">&nbsp;</div>
  <div class="middle">&nbsp;</div>
  <div class="right">&nbsp;</div>
</header>

Chrome 背景图片问题

Chrome background image issue

css

background

google-chrome