Question

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

我有一个名为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%;
}

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

多个背景位置

1 个答案: