我遇到了一个我似乎无法弄清楚的非常奇怪的问题。
我在样式表 galleria-fullscreen.css.liquid
中有几张图片用作背景图片。出于某种原因,有些图像会加载,有些则不会。它们都位于 Shopify 的 assets 文件夹中,并且确实没有韵律或原因其中一些正在加载而另一些则失败。
我试过使用以下方法:
background: url( {{'down.gif'}} );
background: url('down.gif');
background: url( {{'down.gif'}} | asset_url );
这些更改似乎都不起作用。
我认为最好的办法是查看 firebug 中的页面并亲自查看。
https://fine-grain-2.myshopify.com/products/the-bowden-brown-cherry#
相关代码我也会贴在下面。
这是与问题相关的 CSS:
这张图片加载:
.galleria-thumbnails-tab {
opacity: .7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
position: absolute;
left: 50%;
margin-left: -50px;
top: 0;
height: 16px;
width: 100px;
background: #DADAD2 url( {{'up.gif'}} ) no-repeat 50% 5px;
cursor: pointer;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
-webkit-border-top-left-radius: 4px;
}
这些图片无法加载:
.galleria-thumbnails-tab.open,
.galleria-thumbnails-tab.open:hover {
background: url( {{'down.gif'}} );
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
.galleria-image-nav-right,
.galleria-image-nav-left {
width: 100px;
right: 0;
top: 0;
height: 100%;
background: url( "{{'arrow-right.png'}}" ) no-repeat 50% 50%;
position: absolute;
cursor: pointer;
z-index: 2;
display: none;
}
.galleria-image-nav-left {
left: 0;
right: auto;
background-image: url( "{{'arrow-left.png'}}" );
}
最佳答案
我会仔细检查您的 css backround-image
的语法。确保它遵循适用于 shopify 的正确模板语法。
仔细检查网络检查器中的网络选项卡。如果您有针对特定图像的 404,请仔细检查语法和路径以确保您正确加载了图像。
试试这个语法:
看起来你缺少| asset_url
或未将其放在双右括号内。
#selector {background:url({{ 'image.jpg' | asset_url }});}
关于 SHOPIFY LIQUID LAYOUT/CSS URL 格式的一些信息:
http://wiki.shopify.com/Asset_url
http://ecommerce.shopify.com/c/ecommerce-design/t/images-url-s-in-the-style-css-file-109049
关于css - 无法通过 Shopify 中的 CSS 样式表加载各种背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14840390/