Question

好的，所以这是我的问题。对于客户我使用的是灯箱（在这种情况下是slimbox2）我修改了它的内容，这样如果图像大于屏幕尺寸，图像最大宽度/高度是屏幕尺寸本身。

换句话说： if image＆gt; screensize =＆gt; image == screensize

我正在为大多数浏览器使用css3 background-size属性。对于IE5.5 +我正在使用过滤器：AlphaImageLoader 。

所有这一切都很好，但当我将鼠标悬停在图像上时，我应该得到一个下一个和上一个按钮。这在IE7中不起作用 - 似乎按钮保留在背景图像下，因为它上面有 css过滤器：AlphaImageLoader 。有没有办法让按钮可见？

这是我的代码的一部分（与PHP混合的JQUERY）：

        $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作为替代方案。

IE7，CSS3，背景图片＆amp;缩放

1 个答案: