代码之家 › 专栏 › 技术社区 › Nick Larsen

CSS透明舷窗

css html javascript

Nick Larsen · 技术社区 · 16 年前

我正在尝试使用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像素×200像素)。这确实给了我想要的效果,但主要的问题是我不知道用户的屏幕大小,但我也不想使用对用户来说太大的图像,因为随着图像大小的增长,移动图像会变得明显不稳定。

有没有一种方法可以让我只需要提供一个与实际舷窗图形大小相同的舷窗图像,而使用其他方法来遮盖屏幕的其余部分?我愿意使用HTML(5是确定的),CSS和javascript只。

2 回复 | 直到 16 年前

Jeff B 16 年前

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

这样,您的图像就不必太大,您可以自动调整到任何屏幕大小。父div的宽度/高度应为200%,或者如果您希望得到更高的值,您可以简单地将高度/宽度设置为100%,并在JS中使用一些奇特的数学来随着端口的移动动态调整div的大小。

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

KP. 16 年前

<div>

第一行有一个全宽的div,第二行有一个div,image,div模式。第三行又是一个单div全宽。概念上:

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

<部门> hole image <

<--------<部门>---------&燃气轮机;

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前