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要素の後に画像を追加し、リスト全体の1つ上に画像を追加し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 に答える