我有一个带有自定义主题的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_images@x2",所以我正在尝试这个 atm,并且图像无法使用特殊字符上传。
我不知道这是否出了问题,但如果是,我如何将带有@的图像上传到shopify?
尝试以下操作
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
}