我有一張圖片，只有在位於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

回答

相關問題