理论上可以使用HTML和JavaScript创建一个'窗口'来查看div背后的内容吗？ [英] Is it theoretically possible to create a 'window' to view behind a div using HTML and JavaScript?

问题描述

我目前正在开发一个非常大的焦点背景图片，它可以移动，并且会根据窗口大小而改变。

在这张图片的顶部，我有一个具有纯色和内容的div。

理论上可以在div中设置另一个div，并使用它几乎就像一个窗口来切出初始div查看下面的图片。

我会很高兴如果这种方法使用了现在只有在现代浏览器中才有的功能。

如果不是，我将不得不将初始div切割成4个或更小的div，并将它们放置在我希望能够查看的区域周围，但我希望尽可能在语义上尽可能实现这一点。

任何指向正确方向的指针都会大受欢迎！

strong>

我可能会在这里走错路，但我正在研究如何模仿一种屏幕截图类型像 - > http://html2canvas.hertzen.com/

我在想，如果我可以操纵这个来拍摄只用于div边角坐标的图片，并让它忽略顶部的块颜色div，我应该可以得到细节并显示在一个canvas元素中。

然后，我只需要在拖动，滚动和调整事件大小时进行更新。

为澄清而编辑

主div上的内容（具有纯色背景）具有需要的文本和表单元素可以点击和使用。

解决方案

一个简单的解决方案是为您的容器div使用背景图片。背景图像将是一个中心具有透明正方形的PNG。请注意，这只会在你的容器div有固定的宽度和高度时才有效。

I am currently developing a page with a very large and focal background image which can move and will change depending on window size.

On top of this image I have a div with a solid colour and content.

Is it theoretically possible to set another div inside of this div and use it almost like a window to cut out the initial div to view the image underneath.

I would be happy if this utilised something that was only available in modern browsers.

If not I will have to cut up the initial div into 4 or so smaller divs and place them almost like a frame around the area I want to be able to look through, but I would like to try and achieve this as semantically as possible.

Any pointers in the right direction greatly received!

What I have looked at

I could be going down the wrong path here, but I am looking into how to mimic a type of screen capture, something like -> http://html2canvas.hertzen.com/

I am thinking if I can manipulate this to take the picture only for the co-ordinates of the corners of the div and make it ignore the block colour div on top of it, I should be able to get the details and show them in a canvas element.

Then I would just need to make it update on drag,scroll and resize events.

edit for clarification

The content on the main div (with a solid background colour) has text and form elements that need to be clickable and useable.

解决方案

A simple solution would be to use a background image for your container div. The background image would be a PNG with a transparent square in the center. Please note that this would only work if your container div has a fixed width and height.

这篇关于理论上可以使用HTML和JavaScript创建一个'窗口'来查看div背后的内容吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！