IE7，CSS3，背景图片＆缩放

Question

好的，这是我的问题。 对于我使用灯箱的客户端（在这种情况下为slimbox2） 我已经修改了它的内容，以便如果图像大于屏幕大小，则图像的最大宽度/高度就是屏幕本身的大小。

因此，换句话说：如果图像>屏幕尺寸=>图像==屏幕尺寸

我使用CSS3背景大小属性为大多数的浏览器至极的作品就好了。 而对于IE5.5 +我使用的是过滤器：AlphaImageLoader。

这一切都很好，但是当我将鼠标悬停在图像上时，我应该会看到下一个和上一个按钮。 这不适用于IE7-看起来按钮留在背景图片下，因为 它有css过滤器：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在对象背景之间放置图像und和内容，所以下面的所有内容都是obscured。作为替代，可以使用background-size shim或pure CSS lightbox。