0

これは私が知っているトリッキーな質問です。スプライトとハイ コントラスト モードの問題に直面しましたが、基本的には次のコードで解決できます。

.icon:before {
  content: url(icons.png);
  position:relative;
  left:-2px;
  top:-109px;
}

.icon {
  width:17px;
  height:18px;
  display:inline-block;
  overflow:hidden;
}

それはすばらしい。それは機能します。ただし、網膜のコンテンツ URL を変更すると、画像がはるかに大きくなるため、失敗します。

とにかく、両方の長所を活かす方法はありますか?

4

1 に答える 1

0

Retina 以外の画像と同じ方法で画像を表示したい場合は、画像の幅を設定する必要があります。

ここにいくつかの例があります：

min-width (レスポンシブ デザイン) デスクトップ CSS の例を次に示します。

.site-header {
    position: relative;
    background: url('assets/images/XXXX.jpg') 0px 0px no-repeat;
    height: 155px;
    background-size: cover;
    background-position:center;
}

レスポンシブ デザインの Retina

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 768px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 768px),
only screen and (                min-resolution: 192dpi) and (min-width: 768px),
only screen and (                min-resolution: 2dppx)  and (min-width: 768px) { 

 .site-header
    {
        position: relative;
        background: url('assets/images/GBBO_BG_1536_R.jpg') 0px 0px no-repeat;
        height: 148px;
        background-size:cover;
    } 

    /*  Iphone P */
    #header #logo_home {
        width: 154px;
        height: 102px;
        background: url('assets/images/GBBO_logo_1536_R.png') 0px 0px no-repeat;
        background-size: 100% auto;
                }
}

レスポンシブ効果を削除するには、「and (min-width: 768px)」を削除します

于 2013-10-04T08:50:29.603 に答える