高效的HTML Div中有洞 [英] Efficient HTML Div with hole in it
问题描述
让我再解释一下，我正在尝试拥有一个大面积（全屏）的固定大小的洞。该孔将沿着屏幕上的鼠标。想想有一个专注于页面的作用域，并且页面的其余部分变成灰色。
我需要在所有浏览器（包括IE 6）中高效地工作。
>我目前的解决方案使用4个div（顶部，右侧，底部，左侧）并以此方式形成洞。然而，这需要重画整个屏幕，并显示工件（div具有背景图像以灰化该区域）。
是否有更好（更有效）的方式实现这一点，任何人都可能遇到过？
注意：漏洞必须将所有事件传递到这些div下方的元素。
- 拥有4个div并调整大小似乎是最快的方法
- 将4个div移动速度减慢4倍
- 将1个容器div移动到4个内部div的速度一样慢（比调整大小慢4倍）
- 使用背景图像是IE支持的唯一选项（因为不透明度过滤器（alpha）对于整个页面大小div太慢）。
- background-image必须是实体（即1px纯色与半不透明度）。尝试获得纯色/半不透明颜色以实现模糊会导致屏幕重新绘制工件（即使不调整大小/移动时）div。
Let me explain a bit more, I am trying to have a large area (full screen) with a fixed size hole in it. The hole will follow the mouse around the screen. Think of having a scope focused on the page and the rest of the page grayed out.
I need this working efficiently in all browsers (inc IE 6).
My current solution uses 4 divs (top, right, bottom, left) and forms the hole in this manner. However this requires a repaint of the whole screen and this shows artifacts (divs have background image to gray out the area).
Is there a better (more efficient) way of achieving this that anyone may have encountered?
Note: The hole has to pass all events through to the elements below these divs.
Conclusions:
- Having 4 divs and resizing them appears to be the fastest approach
- Moving 4 divs is 4x slower
- Moving 1 container div w/ 4 inner divs is just as slow (4x slower than resizing)
- Using background-images is the only option that IE supports (as opacity filter (alpha) is too slow for whole page size divs).
- background-image has to be solid (i.e. 1px solid colour with semi-opacity). Trying to get a solid color / semi-opaque color to achieve blur will cause screen repaint artifacts (even when not resizing/moving) divs.
这篇关于高效的HTML Div中有洞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
