Question

我搜索了很多，我相当确定这不存在，我主要是想确认一下。我想做的是有一个div使其背后的一切都透明 - 类似于canvas'目的地输出合成选项。

对于更多的背景，这是情况。我有一个在QtWebKit叠加层后面绘制的OpenGL窗口。 OpenGL窗口有多个可以重叠的“子窗口”，它们使用WebKit叠加层进行修饰。当它们重叠时，由于这个双层系统，重叠窗口的装饰不会被遮挡。

在备份选项就是用于此全帆布窗口（窗口饰物相当简单），但它会更好不要。请注意，由于这是一种嵌入的WebKit实例，它并不需要是跨浏览器，和东西WebKit的（或QtWebKit的）具体是细

修改

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

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

在真实密钥是-webkit掩模图像（http://www.webkit.org/blog/181/css-masks/）和-webkit-画布（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);
}

Answer 1

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

CSS Masks

相当于普通html元素的画布“目标输出”？

1 个答案: