Я искал вокруг совсем немного, и я уверен, что этого не существует, я в основном хочу подтвердить это. То, что я хотел бы сделать, это иметь div, который делает все позади него прозрачным - аналогично тому, что делает вариант компоновки контуров canvas.Эквивалент холста "destination-out" для обычного элемента html?
Для немного более контекста, вот в чем ситуация. У меня есть окно OpenGL, нарисованное за оверлей QtWebKit. Окно OpenGL имеет несколько «подокнов», которые могут перекрываться, которые декорируются с использованием наложения WebKit. Когда они перекрываются, из-за этой двухслойной системы украшения для перекрывающихся окон не закрываются.
Резервное копирование - это просто использовать холст с полным окном для этого (обрезка окон довольно проста), но было бы лучше не делать этого. Обратите внимание, что поскольку это встроенный экземпляр WebKit, он не должен быть кросс-браузером, и что-то специфическое для WebKit (или QtWebKit).
EDIT
Я не могу ответить на свой вопрос в течение 24 часов, так что вот мое решение, с благодаря @Kevin Пено
Ниже приводится упрощенная версия того, что я искал , Он создает два 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);
}
[Надеюсь, что это помогает?] (Http://www.webkit.org/blog/181/css-masks/) –
@Kevin Пено - Я думаю, что я могу использовать, что с Canvas- сгенерированную маску для достижения желаемого эффекта. Теперь попробуй ... спасибо. – jfaust