CSS 透视舷窗答案

【问题标题】：CSS see through portholeCSS 透视舷窗
【发布时间】：2010-02-10 18:40:00
【问题描述】：

我正在尝试使用 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。

【问题讨论】：

嘿嘿嘿——这在flash的早期曾经风靡一时

标签： javascript html css

【解决方案1】：

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

这样，您的图像不必太大，您可以自动调整到任何屏幕尺寸。父 div 的宽度/高度为 200%，或者如果你想变得花哨，你可以简单地将高度/宽度设置为 100%，并在 JS 中使用一些花哨的数学来随着端口的移动动态调整 div 的大小。

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

【讨论】：

听起来是最好的主意。 CSS 还没有“穿透”透明度。
更好的是支持 openGL 类型的混合模式。然后你可以简单地使用 (ZERO, 1-SRC) 混合来应用它。
这行得通。起初，我尝试通过将顶部和底部 div 固定在适当的位置并仅调整它们的高度来做到这一点，但是在移动鼠标时会导致屏幕出现裂缝。将所有内容都放在 1 个大 div 中可以防止这种情况发生，并且会稍微缩小数学范围。非常感谢。

【解决方案2】：

如果您创建多个 <div> 面板并将它们放置在 3 行的位置。

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

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

<div>hole image<div>

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

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

【讨论】：

“你必须编写 div 的 CSS 计算脚本”，不，他不会！他可以简单地做：“position-top:50%;” “顶部：-125px”（其中 125px 是中间“舷窗”高度的 50%），然后一直重复此操作（底部相同，左侧：“left:50%; left:-125px;” +对）。代码需要适应，但这就是它背后的理论。