我正在尝试使用 CSS 创建一个“舷窗”。当我说舷窗时，我的意思是使屏幕的一部分透明，这样您就可以看到舷窗后面的任何内容，仅此而已。
我能够通过将主体的背景颜色设置为与前景色相同，然后使用具有圆形渐变的舷窗图像来获得我想要的效果，中间为白色，边缘为黑色，只要所有的页面上的内容全部是相同的颜色。这不完全是我想要的，因为我想使用颜色或屏幕后面的任何东西。
我想出了这个：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test See Through Mouse</title>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { height: 100%; background-color: green; }
#cover { height: 100%; width: 100%; top: 0; position: fixed; background: url(porthole.png) no-repeat; }
</style>
</head>
<body>
Hi, I am behind the scenes content. Hi, I am behind the scenes content. Hi, I am behind the scenes content.
<!-- repeated enough times to fill the screen with text -->
<div id="cover"></div>
<script type="text/javascript">
$('#cover').live('mousemove', function(e) {
<!-- the image is 3000px by 3000px and I want the center of the visible part where the mouse is -->
$('#cover').css('background-position', (e.pageX - 1500) + 'px ' + (e.pageY - 1500) + 'px');
});
</script>
</body>
</html>
其中舷窗图像是一个巨大的 PNG 图像（每个方向的屏幕尺寸的几倍），中间有一个不可见的小圆圈（大约 200 像素 x 200 像素）。这确实给出了我想要的效果，但主要问题是我不知道用户的屏幕尺寸，但我也不想使用对用户来说太大的图像，因为移动它会明显变得不稳定随着图像尺寸的增大。
有没有办法让我只需要提供一个与实际舷窗图形大小相同的舷窗图像，而使用其他方法来隐藏屏幕的其余部分？我愿意只使用 HTML（5 即可）、CSS 和 javascript。
为什么不使用 250x250 的舷窗图像，然后用相同颜色的 div 包围它？它们都可能是移动的父级 div 的子级。
这样，您的图像不必很大，并且可以自动调整到任何屏幕尺寸。父 div 的宽度/高度将为 200%，或者如果您想要更奇特，您可以简单地将高度/宽度设置为 100%，并在 JS 中使用一些奇特的数学来随着端口移动动态调整 div 的大小。
================
| div |
================
|div| port |div|
================
| div |
================
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
