Shopify 视网膜显示图像精灵

Question

我有一个带有自定义主题的 shopify 网站。

图像位于名为“sprite_images.png”的精灵中。 我正在查看一些关于将视网膜精灵应用于视网膜显示器的网站。

http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/ http://alexthorpe.com/uncategorized/css-sprites-for-retina-display-devices/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 称为“sprite_images@x2”，所以我正在尝试这个 atm，并且无法上传带有特殊字符的图像。

我不知道这是否有问题，但如果是这样，我如何将带有 @ 的图片上传到 shopify？

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