Question

我正在尝试使用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乘200px）的隐形。这确实给了我想要的效果，但主要的问题是我不知道用户的屏幕尺寸，但我也不想使用对用户来说太大的图像，因为移动它会明显变得更加笨拙随着图像尺寸的增长。

有没有办法让它只需要提供一个与实际舷窗图形大小相当的舷窗图像，使用其他方法来掩盖屏幕的其余部分？我愿意使用HTML（5个没关系），CSS和javascript。

Answer 1

为什么不使用250x250的舷窗图像，然后用相同颜色的div包围它？他们都可能是移动的父母div的孩子。

这样，您的图像就不必太大，您可以自动调整到任何屏幕尺寸。父div的宽度/高度为200％，或者如果你想得到花哨，你可以简单地让高度/宽度为100％，并在JS中使用一些花哨的数学来动态调整div的移动。 / p>

================
|     div      |
================
|div| port |div|
================
|     div      |
================

Answer 2

如果你创建了许多<div>面板并按照你有3行的方式定位它们。

第一行有一个全宽的div，第二行有一个div，image，div模式。第三行再次具有单个div全宽。从概念上讲：

<--------<div>--------->

<div> hole image <div>

<--------<div>--------->

将div设置为不透明样式并匹配舷窗图像的颜色。

CSS通过舷窗看到

2 个答案: