javascript - CSS 透明蒙版/挖空

Question

我正在尝试在 CSS 中找到一种创建蒙版的好方法，在该蒙版中，蒙版被剔除，我可以在它后面传递另一个图像或 div。

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

这就是我试图开始工作的方法，当您将鼠标悬停在图像上时，当您将鼠标悬停在小脸上时，您会看到一个实心黑条，但我需要一种方法来显示另一个图像或仍然存在的渐变面具后面。

<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

更新你的图片？

fiddle :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;
}