css - 多个背景位置

Question

请问是否可以为同一张背景图片声明多个背景位置。

我有一个包含名为 page_heading 的类的 span，我希望此类将同一图像显示两次，一次在文本开头，一次在文本结尾。

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

Answer 1

您可以使用多背景的 CSS3 功能，这将完全满足您的需要(browser support 也不错)。

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%;