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 在对象背景和内容之间放置了一个图像，所以下面的所有东西都是obscured。使用背景大小的垫片或纯 CSS 灯箱作为替代。

于 2012-08-31T20:15:35.107 回答