image - IE7、CSS3、背景图像和缩放

Question

好的，这是我的问题。对于我使用灯箱的客户(在本例中为 slimbox2)我已经修改了它的内容，这样如果图像大于屏幕尺寸，图像最大宽度/高度是屏幕尺寸本身。

换句话说:if image > screensize => image == screensize

我为大多数浏览器使用 css3 background-size 属性，效果很好。对于 IE5.5+，我使用的是 filter: AlphaImageLoader。

这一切都很好，但是当我将鼠标悬停在图像上时，我应该会看到下一个和上一个按钮。这在 IE7 中不起作用——按钮似乎停留在背景图像下，因为它有 css filter: AlphaImageLoader 就可以了。有没有办法制作按钮可见吗？

这是我的一段代码(JQUERY 与 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、定位相对/绝对等。

Answer 1

AlphaImageLoader 在对象背景和内容之间放置一个图像，所以下面的所有内容都是 obscured .使用background-size shim或 pure CSS lightbox作为备选。