IE7，CSS3，背景图片＆缩放

问题描述：

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

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

我使用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的最常见的解决方案，定位相对/绝对等。

按钮''标签？我知道ie7，如果你想要块类型的按钮，他们必须有一个非透明的背景颜色或背景图像设置为了他们正常工作，特别是如果他们不包含文本。尝试添加'background-image：url（'nonexistantimage.jpg'）;'到'#lbPrevLink，＃lbNextLink'。不存在的图像也适用。 – 2012-07-13 10:12:59

答

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

我通过完全自定义代码来完成工作，以便当它比我的屏幕更大时，它将重新调整为屏幕尺寸 – 2012-09-03 09:39:40

IE7，CSS3，背景图片＆缩放

相关推荐