CSS 透明遮罩/挖空

Question

我正在尝试在CSS中找到一种好方法来创建一个蒙版，其中蒙版被挖空，我可以在其后面传递另一个图像或div。

我尝试使用的一个例子在这里http://jsfiddle.net/LxBM5/该示例中的问题是我需要能够使用渐变颜色而不是我在 jsfiddle 示例中拥有的实心块

当您将鼠标悬停在图像上时，这就是

我试图开始的工作，当您披在小脸上时，您会看到一个实心黑条，但我需要一种方法来显示仍然在蒙版后面的另一个图像或渐变。

<div class="mask">
    <div class="image">
    </div>
</div>

.mask {
    position: relative;
    width: 500px;
    height: 300px;
    background: url(http://i.imgur.com/dyFDLPp.png) top left no-repeat;
    background-attachment: fixed;
}
.image {
    position: absolute;
    width: 100px;
    height: 400px;
    background: url(http://i.imgur.com/zbK3Ps2.png) top left no-repeat;
    background-attachment: fixed;
    display: none;
}

var mousedown = false;
$('.mask').on('mousedown mouseup', function () {
    mousedown = !mousedown
    if (mousedown) {
        $('.image').css({
            display: 'block'
        });
    } else {
        $('.image').css({
            display: 'none'
        });
    }
});
$('.mask').on('mousemove', function (e) {
    if (mousedown) {
        $('.image').css({
            top: e.clientY - 50,
            left: e.clientX - 50
        });
    }
});

Answer 1

更新您的图像？

小提琴：http://jsfiddle.net/LxBM5/3/

.mask {
    position: absolute;
    width: 50px;
    height: 400px;
    background: url(http://tinyurl.com/k8vzdo2) top left no-repeat;
    background-attachment: fixed;
    display: none;
}