理論上可以創建一個'窗口'來查看使用HTML和JavaScript的div後面的內容嗎？

我目前正在開發一個非常大的焦點背景圖片，它可以移動，並且會根據窗口大小而改變。理論上可以創建一個'窗口'來查看使用HTML和JavaScript的div後面的內容嗎？

在這張圖片的頂部，我有一個純色和內容的div。

從理論上講，可以在這個div裏面設置另一個div，並使用它幾乎就像一個窗口來切出初始div來查看下面的圖像。

我會很高興，如果這利用的東西，只有在現代瀏覽器中可用。

如果不是，我將不得不將初始div切成4個或更小的div，並將它們放置在我希望能夠查看的區域周圍，但我想嘗試實現這一點語義儘可能。

任何指針在正確的方向大受歡迎！

我已經看過

我在這裏可以去錯了路，但我期待到如何模仿式屏幕捕捉的，有點像 - >http://html2canvas.hertzen.com/

我考慮如果我可以操縱這個只爲了div的角落座標拍攝圖片，並讓它忽略頂部的塊顏色div，我應該能夠獲得細節並在canvas元素中顯示它們。

然後，我只需要在拖動，滾動和調整事件時進行更新。

編輯澄清

在主DIV的含量（與固體的背景顏色）具有需要可點擊以及可用文本和形式的元件。

來源

2011-11-02 Toby

甚則有純色和內容你嘗試過使用邊框（和邊框圖片）？並有「窗口」部分是真正的透明背景 – Raynos

內容是文字和表格元素，我不能僞造他們，我不認爲。 – Toby

@Toby，你有沒有找到一個解決方案，通過這樣的一個div層「打孔」？ – BenRacicot

一個簡單的解決辦法是使用背景圖片爲您的div容器。背景圖像將是一箇中心具有透明正方形的PNG。請注意，這隻適用於您的容器div具有固定的寬度和高度。

來源

2011-11-02 13:06:12 Thomas

有時候，最簡單的解決方案是最難想象的，這可能只是工作，即將試用。 – Toby

它可以使用多個漸變背景和指針事件來完成。這裏有一個demo和一個截圖。由於pointer-events CSS屬性，可以選擇通知文本。我的演示版現在只適用於Firefox，但可以輕鬆移植到支持multiple gradient背景和pointer-events的其他瀏覽器。但是，pointer-events屬性會影響整個疊加層，而不僅僅是可能不合需要的洞。

div punch through 。

而這裏的代碼：

<!DOCTYPE html> 

<html> 
<head> 
<meta charset="UTF-8"> 
<style type="text/css"> 
body { 
    margin: 0; 
    padding: 0; 
} 

.underneath { 
    padding: 0; 
    margin: 265px 0 0 0; 
    width: 600px; 
} 

.overlay { 
    top: 0; 
    left: 0; 
    position: absolute; 
    width: 600px; 
    height: 600px; 
    background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 150px, transparent 150px, transparent), 
       -moz-linear-gradient(0deg, rgba(0,0,0,1) 150px, transparent 150px, transparent), 
       -moz-linear-gradient(-90deg, rgba(0,0,0,1) 150px, transparent 150px, transparent), 
       -moz-linear-gradient(180deg, rgba(0,0,0,1) 150px, transparent 150px, transparent); 
    pointer-events: none; /* send mouse events beneath this layer */ 
} 
</style> 
</head> 
<body> 

<p class="underneath"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt 
    in culpa qui officia deserunt mollit anim id est laborum. 
</p> 

<div class="overlay"></div> 

</body> 
</html>

來源

2011-11-02 12:13:20

哇，這是我所看到的真正進步，謝謝！雖然我只是在黑色內容區域添加了一個表單元素，但它在Firefox 7中不可點擊/可編輯。 – Toby

@Toby這是因爲'pointer-events'。用那個屬性擺弄一下。我猜可能會在鼠標懸停時更改此屬性的值（'auto' /'none'）。將鼠標懸停在洞上，然後選擇none，將鼠標懸停在表單上，然後選擇auto。 –

使用不透明在CSS爲DIV。

例如：

<style type="text/css"> 

#block 
{ 
background-color:#000; 
color:#fff; 
opacity:0.4; 
filter:alpha(opacity=40); /* For IE8 and earlier */ 
} 

</style> 

<div id="block"> 

This is some text that is placed in the transparent box. 

</div>

來源

2011-11-02 13:48:34

添加到我的新div只會顯示它下面的div。我需要深入挖掘。 – Toby

理論上可以創建一個'窗口'來查看使用HTML和JavaScript的div後面的內容嗎？

回答

相關問題