私は理解できないような非常に奇妙な問題を抱えています。
スタイルシートの背景画像として使用している画像がいくつかあります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'}}" );
}