0

我已经搜索了很多，我很确定这不存在，我主要是想确认这一点。我想做的是有一个 div 让它背后的一切都透明——类似于画布的目的地输出合成选项。

对于更多的上下文，这里是情况。我在 QtWebKit 覆盖层后面绘制了一个 OpenGL 窗口。OpenGL 窗口有多个可以重叠的“子窗口”，它们使用 WebKit 覆盖进行装饰。但是，当它们重叠时，由于这种两层系统，重叠窗口的装饰不会被遮挡。

备份选项只是为此使用全窗口画布（窗口装饰相当简单），但最好不要这样做。请注意，因为这是一个嵌入式 WebKit 实例，所以它不需要跨浏览器，并且特定于 WebKit（或 QtWebKit）的东西就可以了。

编辑

我无法在 24 小时内回答我自己的问题，所以这是我的解决方案，感谢@Kevin Peno

以下是我正在寻找的简化版本。它创建了两个“可见”和“不可见”的 div。“不可见”掩盖了“可见”，以便在其后面显示背景图像而不是“可见” div。

真正的键是 -webkit-mask-image ( http://www.webkit.org/blog/181/css-masks/ ) 和 -webkit-canvas ( http://www.webkit.org/blog/176/ css-canvas-drawing/），所以这只适用于基于 webkit 的浏览器。

HTML：


<html>
<body>
  <div id="visible"/>
  <div id="invisible"/>
</body>
</html>

JavaScript：


function updateMask()
{
    var w = $("#visible").width();
    var h = $("#visible").height();
    var context = document.getCSSCanvasContext("2d", "mask", w, h);
    context.fillStyle = "rgba(255, 255, 255, 1.0)";
    context.fillRect(0, 0, w, h);

    var my_off = $("#visible").offset();
    var inv_off = $("#invisible").offset();
    var rel_left = inv_off.left - my_off.left;
    var rel_top = inv_off.top - my_off.top;
    context.clearRect(rel_left, rel_top, $("#invisible").width(), $("#invisible").height());
}

$(window).ready(function()
{
   updateMask();


   $("#invisible").draggable();
   $("#invisible").bind("drag", function(e, ui)
       {
           console.log("drag");
           updateMask();
           e.preventDefault();
       });
});

CSS：


body
{
  background-image: url(http://www.google.com/images/logos/ps_logo2.png);
}

#visible
{
  position: absolute;
  background-color: red;
  z-index: 0;
  width: 1000px;
  height: 1000px;
  top: 0;
  left: 0;
  -webkit-mask-image: -webkit-canvas(mask);
}

#invisible
{
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
  cursor: move;
  background-color: rgba(0, 255, 0, 0.5);
}
4

1 回答 1

0

这是一篇关于使用 css 将图像蒙版应用到元素的博客文章。这听起来非常接近您正在寻找的东西，或者至少对某些想法有好处。让我知道它是如何工作的。

CSS 蒙版

于 2011-04-21T14:55:14.357 回答