0

我想问是否可以为同一背景图像声明多个背景位置。

我有一个名为类的跨度，page_heading我希望这个类显示相同的图像两次，一次在文本的开头，一次在文本的结尾。

HTML：

<h1><span class="page_heading">Text</span></h1>

CSS：

.page_heading {
  padding: 0 30px 0 30px;
  background: #ff6600;
  background: #ff6600 url('../img/star.png') no-repeat 0 50%;
}

我想这样做（我知道这是不对的，只是为了理解）：

.page_heading {
  padding: 0 30px 0 30px;
  background: #ff6600;
  background: #ff6600 url('../img/star.png') no-repeat 0 50%;
  background: #ff6600 url('../img/star.png') no-repeat 100% 50%;
}
4

1 回答 1

3

您可以使用多背景的 CSS3 功能，这将完全满足您的需求（浏览器支持也不错）。

background: url('../img/star.png') no-repeat 0 50%,
            url('../img/star.png') no-repeat 100% 50%;
background-color: #ff6600

这个解决方案的问题是没有办法在不符合标准的浏览器中使用直接的 CSS 实现相同的效果。您可以考虑的后备措施是修改 DOM 结构以包含另一个包装元素，该元素将采用 HTML 中的一个背景，或者对 Javascript 做同样的事情。在后一种情况下，请注意 IE8（如果我没记错的话）background如果无法解析它会拒绝整个属性。所以你会有 CSS

/* IE8: at least get one of the backgrounds */
background: url('../img/star.png') no-repeat 0 50%;

/* CSS3 conformant browsers: both backgrounds; IE8 ignores this completely */
background: url('../img/star.png') no-repeat 0 50%,
            url('../img/star.png') no-repeat 100% 50%;
于 2012-04-07T17:36:57.577 回答