我有一个<table>
,我想覆盖一个圆圈,让圆圈外的所有东西都模糊不清。圆圈将根据功能改变位置,因此需要是动态的。我知道如何用图像做到这一点,但这需要一张桌子。我使用了以下CSS,但这只会让我模糊整个单元格。
-webkit-filter: blur(10px)
我能想到的两个选项是覆盖某种由正方形和圆形组成的svg,并模糊边缘之间的空间(这可能吗?),或者应用某种模糊渐变到符合圆的边缘的细胞。
任何想法都将不胜感激。 这是我想要完成的一个例子。 http://i.stack.imgur.com/f5EqT.png
答案 0 :(得分:6)
可以做这样的事情,但可能不像你希望的那样简单。
我的技术涉及克隆整个内容区域,并将其完全覆盖在原始区域之上,但仅显示其中的一部分。
您可以通过javascript克隆该区域(jQuery&#39; s .clone()
可以很好地工作),或者您可以在HTML中再次包含所有标记,但对于这么大的表格,这是效率不高。
为了只显示它的一小部分,我将它全部放在div
设置overflow: hidden
的元素内,这样所有的溢出都会被切断。
棘手的部分是将重叠位置保持在需要的位置。
在我的例子中,我有一个圆圈移动跟随鼠标。默认情况下,圆圈和克隆内容绝对位于原始内容的左上角,允许它排成一行,但随着我的圆圈移动,内容随之移动,因为它位于圆圈内(设置{ {1}}会使圆圈的行为与overflow: hidden
一样,包含绝对位置。
所以,为了弥补这一点,我总是将克隆内容移动到与圆圈移动相反的方向上。
然后,这只是模糊原始内容的问题,同时保持克隆内容清晰。
我希望有所帮助!