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>

我希望使用background-image: url('../img/menu_divider.png');属性在每个li元素后面添加一个图像，在整个列表上面添加一个图像。此外，我想保持图像的大小，即使它被@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');
  }
}

CSS3背景图像<垂直列表中的<li> </li>

1 个答案: