Question

我目前正在开发一种离子1应用程序，我想知道它是否可以用于＆＃34; unblur＆＃34;具有css规则的特定浮动div filter: blur(15px)。

对于我的应用程序，我需要有一个显示秘密密码的视图，为了保证显示安全，我想在模糊中显示密码，但当用户将手指放在屏幕上时，用户触摸屏幕的地方需要是＆＃34; unblur＆＃34;。我们的想法是不要在一次完整的代码显示。（看图片）

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

15px的div模糊
div不模糊

我的问题是，第二个div可以＆＃34; unblur＆＃34;第一个是叠加。

＆＃13;

.codePinView .blur {
  position: fixed;
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
}

.codePinView .no-blur {
  position: fixed;
  height: 80px;
  width: 70px;
  top: 30vh; //only for superpose the two div
  left: 50vw; //only for supperpose the two div
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  z-index: 999999;
}

＆＃13;

<div class="pin blur">
  <div class="pin-block">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
</div>
<div class="no-blur">
</div>

＆＃13;

感谢您的帮助

Answer 1

这个怎么样？首先给出跨度大小，以保持我们将创建的面具的位置网格。创建一个蒙版calc((100 - spansize)/2)并将其分为三个部分：中间部分，将使您通过蒙版看到它，给它一个透明的背景。因此，中间部分将具有与跨度相同的大小，而在它之前和之后出现的将具有.pin-block{ position: relative; overflow: hidden; z-index: 0; display: inline-block; } .pin-block span{ width: 20px; display: inline-block; line-height: 20px; height: 20px; } .mask{ position: absolute; width: 200%; height: 100%; left: 0; top: 0; z-index: 99; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .mask .before-visible, .mask .after-visible{ -webkit-filter: blur(15px); -moz-filter: blur(15px); -o-filter: blur(15px); -ms-filter: blur(15px); filter: blur(3px); width: calc((100% - 20px) / 2); height: 100%; display: block; background-color: #fff; float: left; } .mask .visible{ float: left; background-color: transparent; height: 100%; width: 20px; } .mask:after{ content: ''; display: block; clear: both; }彩色背景和模糊。面具已经完成，然后我将它的父宽度设为200％，所以当你移动它时，它将始终保持在针脚上。

然后只需依靠JS将其左移从0％移至100％，以便在需要时显示每个数字。

<div class="pin-block">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <div class="mask">
      <span class="before-visible"></span>
      <span class="visible"></span>
      <span class="after-visible"></span>
    </div>
</div>

global $wp_query;
$wp_query->is_page = true;

希望它有所帮助！

使用css取消特定区域

1 个答案: