我正在查询如何拥有一个站点，为了 StackOverflow 的争论，其中覆盖 div 可以隐藏除 div 内部内容之外的所有内容。我想就像照相机一样，您只能看到取景器中的内容，而看不到取景器之外的内容。我想暂时修复取景器。
我找到了:Fiddle
这很接近，但不完全是。我试过用谷歌搜索并询问 friend 开发人员，但在资源部门没有运气。任何人有任何想法让我开始吗？
<html>
<div class="content">
<h1>All the page content divs</h1>
</div>
<div id="viewport-window"></div>
</html>
最佳答案
您可以通过应用 clip-path 来做到这一点为您希望覆盖的主要元素添加样式(例如 body 如果您想要整个页面)。您也可以使用 clip以获得更多浏览器支持，但请记住它已被弃用。
演示
有一个静态的剪辑路径，但是当鼠标四处移动时它会变成一个跟随鼠标的 200x200 视口(viewport)
jQuery(document).mousemove(function(e){
var width = jQuery(document).width();
var height = jQuery(document.body).height();
var viewW = 200;
var viewH = 200;
var top = e.pageY - (viewH/2);
var right = (width-e.pageX) - (viewW/2);
var bottom = (height-e.pageY) - (viewH/2);
var left = e.pageX - (viewW/2);
var style = "inset("+top+"px "+right+"px "+bottom+"px "+left+"px)";
jQuery(document.body).css({
"-webkit-clip-path":style,
"-moz-clip-path":style,
"clip-path":style
});
});body {
-webkit-clip-path:inset(20px 200px 200px 40px);
-moz-clip-path:inset(20px 200px 200px 40px);
clip-path:inset(20px 200px 200px 40px);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="https://placekitten.com/g/500/500" />关于javascript - 在给定视口(viewport)中使用叠加 div 裁剪站点显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34317441/