我有一张图片，只有在位于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(); 
});

覆盖/全图象的div

位于正下方的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将解决的主要部，但时间紧迫已经开始，我正试图对流感做这件事。任何帮助表示赞赏。

来源

2014-05-07 Trasiva

#overlay {position：fixed; - 固定位置元素相对于视口或浏览器窗口本身定位。当窗口滚动时，视口不会改变，所以固定的定位元素将保持在页面滚动时的位置，尝试移除它并删除位置：绝对位置在.fullView中，并使用边距等进行定位。 –

@AnindyaBasu删除它们两个都会导致覆盖div被压缩到0x0，并且图像只显示在我的面板和gridview之间。试图通过CSS移动fullView图像失败了，它仍然处于静态位置。 – Trasiva

答案正在凝视着我，我只是没有意识到这一点。还修复了#overlay# CSS was fine, however, I needed to additionally change the。完整视图to。完成此操作后，图像完全覆盖在叠加层上，并且我可以在JavaScript中使用一些CSS更改以精确地对图像进行居中。

来源

2014-05-07 19:54:15 Trasiva

无法正确覆盖图像

CSS

的Javascript

覆盖/全图象的div

回答

相关问题