Shopify视网膜显示图像精灵

Question

我有一个定制的主题shopify网站。

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

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_images @ X2”所以我想这个ATM和图像不能以特殊字符被上传我一直在想。

我不知道这是怎么回事，但如果是我怎么上传带有@的图片来购物？

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 
}