Question

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

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

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

Answer 1

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

这适用于chomre 4.0 +，IE 9 +，Firefox 3 +，Safari 3.1和5以及Opera 10.5。确保还包含相应的前缀（-moz-和-webkit - ）

Answer 2

以下是今天下午我提出的：

background: radial-gradient(ellipse 200px 200px at 50% -25px, transparent 50px, green 0);

看起来它也适用于所有当前的浏览器版本（我只测试过chrome和safari）。

Answer 3

我认为有一种方法可以用css

来做到这一点

我非常确定没有跨浏览器的css解决方案..

我认为你最好的选择可能是<canvas> html element + js。我不参与其中，但肯定可以做到。