CSS

Question

我的图片仅在选中pagegridview内的图标时才会显示。应该发生的是叠加显示，顶部显示完整尺寸的图像。真正发生的事情是叠加层覆盖了我的全尺寸图像并偏离中心。我的代码如下：

CSS

#overlay{
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0px; 
    left: 0px; 
    background-color: #000; 
    opacity: 0.7;
    filter: alpha(opacity = 70) !important;
    display: none;
    z-index: 100;
}
.fullView{
    position: absolute;
}

的Javascript

可以正常显示，无法测试由于叠加在顶部的隐藏。

$('.preview').click(function(){
    $("#<%=imgFull.ClientID%>").attr("src", $(this).attr('fullImg'));
    $("#overlay").show();
    $("#overlayContent").show();
});

$("#<%=imgFull.ClientID%>").click(function(){
    $("#<%=imgFull.ClientID%>").attr("src", "");
    $("#overlay").hide();
    $("#overlayContent").hide();
});

叠加/全图像分割

位于ASP面板和PageGridView

的正下方

<!-- Divs for displaying the full sized image. Initially hidden. Hides again when clicked -->

<div id="overlay"></div>
    <div id="overlayContent" >
        <asp:Image runat="server" ID="imgFull" Width="400" ImageUrl="" CssClass="fullView"/>
    </div>

我可以在大部分时间内宣誓position:absolute css会解决主要部分，但时间紧迫已经开始，我正试图用流感做这件事。任何帮助表示赞赏。

Answer 1

答案是盯着我，我只是没有意识到这一点。 #overlay# CSS was fine, however, I needed to additionally change the。fullView to已修复。完成后，图像完美地悬浮在叠加层的顶部，我能够利用javascript中的一些CSS更改来准确地居中图像。

无法将图像正确叠加

CSS

的Javascript

叠加/全图像分割

1 个答案: