Html 使用css解除特定区域的模糊

我目前正在开发一个ionic1应用程序，我想知道是否可以使用css规则“取消清除”特定的浮动

div

过滤器：模糊（15px）

对于我的应用程序，我需要有一个显示密码的视图，并且为了确保显示的安全，我希望以模糊的方式显示pin码，但是当用户将手指放在屏幕上时，用户触摸屏幕的部分需要“取消模糊”。这样做的目的是不让完整的代码在一次内显示出来。（看图片）

为此，我尝试设置两个div：

• 15像素的div模糊

• a

  div

  不模糊

我的问题是，第二个

div

可以通过叠加来“解除”第一个

.codePinView.blur{
位置：固定；
-webkit过滤器：模糊（15px）；
-moz滤波器：模糊（15px）；
-o-滤波器：模糊（15px）；
-ms过滤器：模糊（15px）；
滤镜：模糊（15px）；
}
.codePinView。无模糊{
位置：固定；
高度：80px；
宽度：70px；
top:30vh；//仅用于叠加两个div
左：50vw；//仅用于支持两个分区
-webkit过滤器：模糊（0px）；
-moz滤波器：模糊（0px）；
-o-滤波器：模糊（0px）；
-ms过滤器：模糊（0px）；
过滤器：模糊（0px）；
z指数：999999；
}

1.
2.
3.
4.

这个怎么样？ 首先给跨度一个大小，以便为我们要创建的遮罩保留一个位置网格。 创建一个遮罩

。遮罩

并将其分为三部分：中间的一部分将使您能够透过遮罩看到，并为其提供一个透明的背景。 因此，中间部分的大小将与跨距相同，而前后出现的部分将具有

calc（（100-spansize）/2）

彩色背景和模糊。 遮罩做得很好，然后我将其设置为父宽度的200%，因此当您移动它时，它将始终保持在pin上

然后依靠JS将其从0%向左移动到100%，以便在需要时显示每个数字

.pin块{
位置：相对位置；
溢出：隐藏；
z指数：0；
显示：内联块；
}
.销块跨度{
宽度：20px；
显示：内联块；
线高：20px；
高度：20px；
}
.面具{
位置：绝对位置；
宽度：200%；
身高：100%；
左：0；
排名：0；
z指数：99；
-moz变换：translateX（-50%）；
-webkit转换：translateX（-50%）；
-ms转换：translateX（-50%）；
-o-转换：translateX（-50%）；
转化：translateX（-50%）；
}
.mask.可见前，.mask.可见后{
-webkit过滤器：模糊（15px）；
-moz滤波器：模糊（15px）；
-o-滤波器：模糊（15px）；
-ms过滤器：模糊（15px）；
过滤器：模糊（3px）；
宽度：计算（（100%-20px）/2）；
身高：100%；
显示：块；
背景色：#fff；
浮动：左；
}
.面具.可见{
浮动：左；
背景色：透明；
身高：100%；
宽度：20px；
}
.面具：之后{
内容：''；
显示：块；
明确：两者皆有；
}

1.
2.
3.
4.

这个怎么样？ 首先给跨度一个大小，以便为我们要创建的遮罩保留一个位置网格。 创建一个遮罩

。遮罩

并将其分为三部分：中间的一部分将使您能够透过遮罩看到，并为其提供一个透明的背景。 因此，中间部分的大小将与跨距相同，而前后出现的部分将具有

calc（（100-spansize）/2）

彩色背景和模糊。 遮罩做得很好，然后我将其设置为父宽度的200%，因此当您移动它时，它将始终保持在pin上

然后依靠JS将其从0%向左移动到100%，以便在需要时显示每个数字

.pin块{
位置：相对位置；
溢出：隐藏；
z指数：0；
显示：内联块；
}
.销块跨度{
宽度：20px；
显示：内联块；
线高：20px；
高度：20px；
}
.面具{
位置：绝对位置；
宽度：200%；
身高：100%；
左：0；
排名：0；
z指数：99；
-moz变换：translateX（-50%）；
-webkit转换：translateX（-50%）；
-ms转换：translateX（-50%）；
-o-转换：translateX（-50%）；
转化：translateX（-50%）；
}
.mask.可见前，.mask.可见后{
-webkit过滤器：模糊（15px）；
-moz滤波器：模糊（15px）；
-o-滤波器：模糊（15px）；
-ms过滤器：模糊（15px）；
过滤器：模糊（3px）；
宽度：计算（（100%-20px）/2）；
身高：100%；
显示：块；
背景色：#fff；
浮动：左；
}
.面具.可见{
浮动：左；
背景色：透明；
身高：100%；
宽度：20px；
}
.面具：之后{
内容：''；
显示：块；
明确：两者皆有；
}

1.
2.
3.
4.

感谢您的回复此方法的问题是我想要一个跟随我的finger@ArthurKnoep我根据你的要求修改了我的答案，这应该可以正常工作！谢谢你的回复这个方法的问题是，我想有一个浮动div跟随我的finger@ArthurKnoep我根据你的要求修改了我的答案，这应该可以正常工作！