CSS透过舷窗 [英] CSS see through porthole
问题描述
我想使用CSS创建一个舷窗。当我说舷窗，我的意思是让一部分的屏幕看透，所以你可以看到舷窗后面是什么和它。
I am trying to create a "porthole" using CSS. When I say porthole, what I mean is to make a portion of the screen see through so you can see whatever is behind the porthole and thats it.
我能够通过将身体的背景颜色设置为与前景颜色相同，然后使用具有圆形渐变的舷窗图像获得我想要的效果，该渐变色的中间是白色，边缘是黑色，只要页面上的所有内容都是相同的颜色。这不是我想要的，因为我想使用颜色或屏幕后面的任何东西。
I was able to get the effect I wanted by setting the background color of the body to the same as the foreground color, then using a porthole image which had a circular gradient with white in the middle and black on the edges as long as all the content on the page was all the same color. This is not exactly what I want, because I would like to use color or anything behind the screen.
我想出了这个：
<!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）的隐形。这确实提供了我想要的效果，但主要的问题是我不知道用户的屏幕尺寸，但我也不想使用一个太大的用户的图像，因为移动它周围变得明显choppier
where the porthole image is a huge PNG image (multiple times the size of my screen in each direction) with an small circle (about 200px by 200px) of invisibility in the middle. This does give the effect I want, but the main problem is I don't know the screen size of the user, but I also don't want to use an image that is too large for the user because moving it around gets noticeably choppier as the image size grows.
有一种方法使我只需要提供一个舷窗图像，而实际的舷窗图形的大小，而不是使用一些其他方法来掩盖其余的屏幕？
Is there a way to make it so that I only need to provide a porthole image that is the size of the actual porthole graphic instead, using some other method to cloak out the rest of the screen? I am willing to use HTML (5 is ok), CSS and javascript only.
推荐答案
为什么不使用舷窗图像250x250，然后用相同颜色的div包围它？它们都可以是移动的父div的子项。
Why not use a porthole image that is 250x250, and then surround it by divs of the same color? They could all be children of a parent div which moves.
这样，您的图像不必很大，您可以自动调整为任何屏幕尺寸。父div的宽度/高度为200％，或者如果你想得到它，你可以简单地使高度/宽度为100％，并在JS中使用一些花哨的数学动态地定义div随着端口移动。 / p>
This way, your image does not have to be huge and you can adjust to any screen size automatically. The parent div would be of width/height 200%, or if you want to get fancy, you could simply have the height/width be 100%, and use some fancy math in JS to dynamically size the divs as the port moves.
================
| div |
================
|div| port |div|
================
| div |
================
这篇关于CSS透过舷窗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
