jquery - 如何屏蔽掉 div 的一部分以在其后面看到？

Question

我正在寻找一种方法来遮盖部分 div，以便后面的内容可见。

看看我的示例，我想用某种掩码替换黑色圆圈，这样当它向下滑动时，可以看到它后面显示的文本(或背景图像)。

jsfiddle

jQuery(document).ready(function() {
    $('.img').click(function() {
        $('.mid').slideToggle('slow');
    });
});

Answer 1

如果您只想使用 CSS，那么有一个非常有创意的解决方案可以解决您的问题。您将“黑洞”所在的水平部分与其他部分分开为三个部分:圆孔的左侧、孔和右侧部分。在孔部分，您实际上放置了一个没有背景的 div 和一个具有合适边框半径的边框。由于您已经修复了所有宽度和高度测量值，因此进一步分离应该没有问题。

最好的例子是鲸鱼:http://www.subcide.com/experiments/fail-whale/

这将适用于 chomre 4.0+、IE 9+、Firefox 3+、Safari 3.1 和 5 以及 Opera 10.5 确保还包括相应的前缀(-moz- 和 -webkit-)