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