0

我有这样的列表#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)媒体查询中将其替换为视网膜图像,我也想保持图像的大小。

4

1 回答 1

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');
  }
}
于 2013-02-20T15:12:49.943 回答