我正在尝试使用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图像(每个方向上是我的屏幕大小的几倍)，中间有一个小圆圈(大约200px x 200px)。这确实达到了我想要的效果，但是主要的问题是我不知道用户的屏幕尺寸，但是我也不想使用对于用户来说太大的图像，因为四处移动会变得更加困惑随着图像尺寸的增加。
有没有一种方法可以使我只需要提供一个与实际舷窗图形大小相同的舷窗图像，即可使用其他方法掩盖屏幕的其余部分？我愿意只使用HTML(5可以)，CSS和javascript。
最佳答案
为什么不使用250x250的舷窗图像，然后用相同颜色的div包围它？它们都可能是移动的父div的子代。
这样，您的图像不必很大，您可以自动调整为任何屏幕尺寸。父div的宽/高为200％，或者，如果您想花哨的话，可以简单地使高度/宽度为100％，并在JS中使用一些漂亮的数学运算法则来随着端口的移动动态调整div的大小。
================
| div |
================
|div| port |div|
================
| div |
================