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

그것은 전혀 작동하지 않습니다와 2 배 스프라이트가 "X2 @ sprite_images"그래서이 기압을 시도하고 이미지가 특수 문자로 업로드 할 수 없습니다 호출 할 필요가 있는지 궁금했다.

내가 잘못했는지는 모르겠지만 @가있는 이미지를 업로드하려면 어떻게해야합니까?

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 
} 

다음 시도