Question

所以我在页面上有几个共享背景图像的元素。我的页面使用bootstrap，两个元素都是3列宽容器。每个都有背景，并通过背景大小包含。

在第二个元素上，我将背景的宽度设为90％，因此它比其他背景略小。

在Firefox中，这会导致第一个元素背景不断闪烁。如果我改变CSS，那么两个背景都是相同的大小，问题就会消失。

它在Chrome和IE中运行良好，这只是一个Firefox问题。

这是一个错误，任何人都有类似的经历吗？

尝试将图像切换为SVG并停止闪烁。然而，在我的情况下不可能使用SVG，因为背景图像有很多脏的污垢，所以SVG就像2MB。

以下是HTML和CSS的要点：

<section id="content-panel">
  <div class="container">
    <div class="row-fluid">
      <div id="thankyou-1" class="span3 bubble-bg-2">
      </div>
      <div id="thankyou-2" class="span3 bubble-bg-2">
      </div>
    </div>
  </div>
</section>
.bubble-bg-2 {
  background: url('/Content/Images/bg-bubble-2.png') no-repeat;
  background-size: contain;
}
#thankyou-1 {
  padding-top: 15px;
  text-align: center;
}
#thankyou-2 {
  background-position: center 25px;
  background-size: 90% auto;
  padding-top: 15px;
}

Answer 1

如果将背景大小声明移出共享类并将其设置在＃thankyou-1 id上，会发生什么？

.bubble-bg-2 {
  background: url('/Content/Images/bg-bubble-2.png') no-repeat;
}
#thankyou-1 {
  background-size: contain;
  padding-top: 15px;
  text-align: center;
}
#thankyou-2 {
  background-position: center 25px;
  background-size: 90% auto;
  padding-top: 15px;
}

使用多个实例和背景大小时，Firefox背景图像闪烁

1 个答案: