我有一个非常奇怪的问题,我似乎无法弄清楚。
我有几张图像用作样式表中的背景图像galleria-fullscreen.css.liquid
。出于某种原因,有些图像会加载,而有些则不会。它们都位于 Shopify 中的资产文件夹中,并且确实没有押韵或原因为什么其中一些正在加载而一些失败。
我尝试过使用以下内容:
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'}}" );
}