1

テーマをカスタマイズした Shopify ウェブサイトを持っています。

画像は「sprite_images.png」という名前のスプライトにあります。Retina スプライトを Retina ディスプレイに適用することに関するいくつかのサイトを見ています。

http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/ http://alexthorpe.com/uncategorized/css-sprites-for-retina-display-デバイス/683/

スプライトを作成し、「sprite_imagesx2.png」という名前を付けました。このためのcssは機能していません。これが例です。

h1.title{
    background:url({{ 'sprite_images.png' | asset_url }}) no-repeat 0 0;
    width:108px;
    height:12px;
    margin:0 auto 10px;
    overflow:hidden;
    display:block;
    text-indent:-999px;
}


@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi) {
    h1.title{
        background-image:url({{ 'sprite_imagesx2.png' | asset_url }}) 
    background-size:108px 12px;
    }
}

まったく機能せず、x2 スプライトを「sprite_images@x2」と呼ぶ必要があるかどうか疑問に思っていたので、この atm を試していますが、画像を特殊文字でアップロードすることはできません。

これが問題なのかどうかはわかりませんが、問題がある場合、@ を含む画像を shopify にアップロードするにはどうすればよいですか?

4

1 に答える 1

1

次を試してください

h1.title{
    background:url({{ 'sprite_images.png' | asset_url }}) no-repeat 0 0;
    width:108px;
    height:12px;
    text-indent:-999px;
}

h1.title{
    background-position: 0 0 !important; <-your position here
}
于 2013-01-24T12:40:16.620 に答える