html - CSS3 background-image 之间在垂直列表中

Question

我有这样的列表#menu <li>：

<nav id="menu">
  <ul>
    <li><a>item 1</a></li>
    <li><a>item 2</a></li>
    <li><a>item 3</a></li>
    <li><a>item 4</a></li>
  </ul>
</nav>

我想在每个 li 元素之后添加一个图像，并使用该background-image: url('../img/menu_divider.png');属性在整个列表上方添加一个图像。此外，即使在@media only screen and (-webkit-min-device-pixel-ratio: 2)媒体查询中将其替换为视网膜图像，我也想保持图像的大小。

Answer 1

好的，所以在尝试了不同的东西之后，我发现我可以做这样的事情：

#menu ul > li {
  background: url('../img/menu_divider.png') no-repeat bottom left;

  -webkit-background-size: <image width> auto; /* Safari and Chrome */
  -moz-background-size: <image width> auto; /* Firefox */
  -ms-background-size: <image width> auto; /* Internet Explorer */
  -o-background-size: <image width> auto; /* Opera */
  background-size: <image width> auto; /* CSS3 */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #menu ul > li {
    background-image: url('../img/menu_divider@2x.png');
  }
}

并添加此以在整个列表上方添加图像：

#menu ul {
  background: url('../img/menu_divider.png') no-repeat top left;

  -webkit-background-size: <image width> auto; /* Safari and Chrome */
  -moz-background-size: <image width> auto; /* Firefox */
  -ms-background-size: <image width> auto; /* Internet Explorer */
  -o-background-size: <image width> auto; /* Opera */
  background-size: <image width> auto; /* CSS3 */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #menu ul {
    background-image: url('../img/menu_divider@2x.png');
  }
}