Html CSS3背景图像介于<；李>；在垂直列表中

我的菜单列表如下所示：

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

#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');
  }
}

项目1
项目2
项目3
项目4

---

我想在每个li元素后面添加一个图像，并使用

背景图像：url（'../img/menu_divider.png'）在整个列表上方添加一个图像属性。此外，我还想保持图像的大小，即使它在仅限媒体的屏幕和（-webkit min device pixel ratio:2）

媒体查询中被替换为视网膜图像。

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

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

#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');
  }
}

#菜单ul>li{
背景：url（'../img/menu_divider.png'）不重复左下角；
-webkit背景尺寸：自动；/*Safari和Chrome*/
-moz背景大小：自动；/*Firefox*/
-ms背景尺寸：自动；/*Internet Explorer*/
-o-背景尺寸：自动；/*Opera*/
背景尺寸：自动；/*CSS3*/
}
@仅媒体屏幕和（-webkit最小设备像素比：2）{
#菜单ul>li{
背景图像：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');
  }
}

#菜单ul{
背景：url（'../img/menu_divider.png'）不重复左上角；
-webkit背景尺寸：自动；/*Safari和Chrome*/
-moz背景大小：自动；/*Firefox*/
-ms背景尺寸：自动；/*Internet Explorer*/
-o-背景尺寸：自动；/*Opera*/
背景尺寸：自动；/*CSS3*/
}
@仅媒体屏幕和（-webkit最小设备像素比：2）{
#菜单ul{
背景图像：url（'../img/menu）_divider@2x.png');
}
}

这一切是怎么回事

x-background-size

？顶部CSS可能只有一行。我需要涵盖许多浏览器版本，下面是我为什么使用特定于浏览器的背景大小属性（）的解释：“[…]为了实现最大的浏览器兼容性，许多web开发人员通过使用扩展来添加特定于浏览器的属性，例如-webkit-用于Safari和Google Chrome，-ms-用于Internet Explorer，-moz-用于Firefox，-o-用于Opera等。与任何CSS属性一样，如果浏览器不支持专有扩展，它将直接忽略它。”唯一不受支持的是背景大小，您可以简单地将图像大小调整到正确的大小，并使用

background:url（'../img/menu_divider.png'）不重复左上角

而且从时间开始，它在每个浏览器中的工作方式都是一样的好吧，对不起。这毕竟不是全部。。。我编辑了问答，以反映我需要使用

背景大小

属性来保持原始图像大小，即使替换为视网膜版本。。。。我还根据你的建议缩短了语法（并删除了一些不必要的样式）。谢谢你的意见！