1

わかりました、ここに私の問題があります。ライトボックス（この場合はslimbox2）を使用しているクライアントの場合、画像が画面サイズよりも大きい場合、画像の最大幅/高さが画面サイズ自体になるように内容を変更しました。

つまり、画像 > 画面サイズ => 画像 == 画面サイズの場合

ほとんどのブラウザで css3 background-size プロパティを使用していますが、これは問題なく動作します。IE5.5+ の場合、フィルター AlphaImageLoaderを使用しています。

これはすべて良いことですが、画像にカーソルを合わせると、次と前のボタンが表示されるはずです。これは IE7 では機能しません。CSSフィルター: AlphaImageLoaderがあるため、ボタンが背景画像の下にとどまっているようです。ボタンを見えるようにする方法はありますか？

これが私のコードの一部です（JQUERY MERGED WITH PHP）：

        $bgsize = preload.width +'px '+preload.height +'px';
        $(image).css({backgroundImage: "url(" + activeURL + ")",
                          visibility: "hidden",
                          display: "block",
                          'background-size':$bgsize,
                          '-webkit-background-size':$bgsize,
    'filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ activeURL+'\',sizingMethod=\'scale\')',
'-ms-filter':'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ activeURL+'\',sizingMethod=\'scale\'

CSSは次のとおりです。

#lbImage {
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
    display: block;
    position: absolute;
    top: 0;
    right:-10px;
    width: 50%;
    outline: none;
}

#lbPrevLink {
    left: 0;
}

#lbPrevLink:hover {
    background: url(prevlabel.jpg) no-repeat 0 15%;
}

#lbNextLink {
    right: 0;
        z-index:20000;
}

#lbNextLink:hover {
    background: transparent url(nextlabel.jpg) no-repeat 100% 15%;
}

PS: z-index、相対/絶対配置などの最も一般的なソリューションを試しました。

4

1 に答える 1

1

AlphaImageLoader は、オブジェクトの背景とコンテンツの間に画像を配置するため、その下にあるものはすべて隠されます。代わりに、背景サイズのシムまたは純粋な CSS ライトボックスを使用してください。

于 2012-08-31T20:15:35.107 に答える