好的,所以在尝试了不同的东西之后,我发现我可以做这样的事情:
#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');
}
}