3

所以我在一个页面上有几个元素共享背景图像。我的页面正在使用引导程序，并且两个元素都是 3 列宽的容器。每个都有一个背景，并通过 background-size 包含。

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

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

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

是bug吗，有人有类似经历吗？

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

这是 HTML 和 CSS 的 jist：

<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;
}
4

1 回答 1

0

如果您将背景大小声明从共享类中移出并将其设置在#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;
}
于 2013-08-26T13:10:01.657 回答