理论上是否有可能创建一个'；窗口'；使用HTML和JavaScript在div后面查看？_Javascript_Html

理论上是否有可能创建一个'；窗口'；使用HTML和JavaScript在div后面查看？

javascript html

理论上是否有可能创建一个'；窗口'；使用HTML和JavaScript在div后面查看？,javascript,html,Javascript,Html,我目前正在开发一个具有非常大和焦点背景图像的页面，该页面可以移动，并将根据窗口大小而改变在这张图片的顶部，我有一个带有纯色和内容的div 从理论上讲，是否可以在这个div的内部设置另一个div，并像窗口一样使用它来剪切初始div以查看下面的图像我会很高兴，如果这是利用的东西，只有在现代浏览器如果没有，我将不得不将初始div分割成4个左右较小的div，并将它们几乎像一个框架一样放置在我希望能够看到的区域周围，但我希望尽可能在语义上实现这一点任何指向正确方向的指针都会收到很好的效果我所看到

我目前正在开发一个具有非常大和焦点背景图像的页面，该页面可以移动，并将根据窗口大小而改变

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

从理论上讲，是否可以在这个div的内部设置另一个div，并像窗口一样使用它来剪切初始div以查看下面的图像

我会很高兴，如果这是利用的东西，只有在现代浏览器

如果没有，我将不得不将初始div分割成4个左右较小的div，并将它们几乎像一个框架一样放置在我希望能够看到的区域周围，但我希望尽可能在语义上实现这一点

任何指向正确方向的指针都会收到很好的效果

我所看到的

我可能走错了路，但我正在研究如何模拟一种屏幕截图，比如->

我在想，如果我可以操纵它，只为div角的坐标拍照，并使其忽略其顶部的块颜色div，我应该能够获得细节并在画布元素中显示它们

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

编辑以进行澄清

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

可以使用多个渐变背景和指针事件来完成。这是一张照片和一张截图。注意：由于

指针事件

CSS属性，可以选择文本。我的演示现在只能在Firefox中使用，但可以很容易地移植到其他支持背景和背景的浏览器上。但是，

指针事件

属性会影响整个覆盖，而不仅仅是可能不需要的孔

下面是代码：

<!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>


身体{
保证金：0；
填充：0；
}
.下面{
填充：0；
利润率：265px0；
宽度：600px；
}
.覆盖{
排名：0；
左：0；
位置：绝对位置；
宽度：600px；
高度：600px；
背景：-moz线性梯度（90度，rgba（0,0,0,1）150px，透明150px，透明），
-moz线性梯度（0度，rgba（0,0,0,1）150px，透明150px，透明），
-moz线性梯度（-90度，rgba（0,0,0,1）150px，透明150px，透明），
-moz线性梯度（180度，rgba（0,0,0,1）150px，透明150px，透明）；
指针事件：无；/*在此层下发送鼠标事件*/
}

Lorem ipsum Door sit amet，为精英服务，为临时雇员提供服务
这是一个巨大的挑战。我们在维尼亚姆岛上吃了一顿饭
nostrud实习ullamco laboris nisi ut aliquip ex ea commodo consequat。
两人或两人在一起是因为他们在一起是因为他们在一起
欧盟福吉亚无法定权利。圣奥恰塔特例外，无过失，必须
在这件事上，我的职责是保护动物。

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

在css中为该div使用不透明度
例如：

#挡块 { 背景色：#000；颜色：#fff；不透明度：0.4；过滤器：alpha（不透明度=40）；/*适用于IE8及更早版本*/ } 这是放置在透明框中的一些文本。
您是否尝试过使用边框（和边框图像），而不是使用纯色和内容？让“窗口”部分成为真正透明的背景内容是文本和表单元素，我不认为我能伪造它们。@Toby，你有没有找到像这样“穿插”div层的解决方案？@BenRacicot-我使用了下面的PNG解决方案，它不是世界上最漂亮的东西，但它完成了任务。：-）哇，这是我所看到的真正的进步，谢谢！不过，我刚刚在黑色内容区域添加了一个表单元素，在Firefox7中它不可单击/编辑。@托比，这是因为
指针事件。对那个财产稍加修改。您可以在鼠标上更改此属性（auto /none ）的值，我猜不到。鼠标悬停在洞上，然后是none ，鼠标悬停在窗体上，然后是auto。将它添加到我的新div中只会显示它下面的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>