水平翻转仅一个背景图像

Question

我有一个带有两个背景图像的标题（每侧一个）。这样：

HTML：

<header>
    ...
</header>

CSS：

header {
    ...
    background-image: url(http://placehold.it/50x50), url(http://placehold.it/50x50);
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat;
}
...

请参阅jsfiddle。

现在我使用两张图片，因为两张图片相同但水平翻转，我只想使用一张图片并使用CSS翻转另一张图片。为了节省一些带宽......

在网络上，我发现我可以使用transform: scaleX(-1);进行翻转。但是如何仅在一个背景图像上应用它？

Answer 1

演示 - http://jsfiddle.net/q1rf735s/1/

改为使用伪元素:before和:after

header {
  width: 500px;
  height: 50px;
  display: inline-block;
}
header:before,
header:after {
  content: url(http://placehold.it/50x50), url(http://placehold.it/50x50);
  display: block;
  float: left;
}
header:after {
  transform: scaleX(-1);
}
header ul {
  margin: 0 50px;
  padding: 0;
  list-style: none;
}
header li {
  float: left;
}
header a {
  width: 100px;
  height: 33px;
  padding-top: 17px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #333;
}

<header>
  <nav>
    <ul>
      <li><a href="#">Foo</a>
      </li>
      <li><a href="#">Bar</a>
      </li>
      <li><a href="#">Foz</a>
      </li>
      <li><a href="#">Baz</a>
      </li>
    </ul>
  </nav>
</header>