特定のゾーンをCSSで非表示にする

Question

私は現在ionic1アプリケーションを開発しており、具体的な浮動小数点の浮動小数点数をにすることが可能かどうかを知りたいと考えています。 filter: blur(15px)

私のアプリでは、秘密のピンコードを表示するためのビューが必要です。ディスプレイを保護するため、ピンコードをぼかして表示したいと思いますが、ユーザーが指を画面に渡すと、ユーザが画面に触れる場所は「ぼかす」必要があります。アイデアは、一度に完全なコードを表示させないことです。 15ピクセル

divが

をぼかすないで

• のdivぼかし：このため

  What I want

  を（絵を見て）私は2つのdivを設定してみてください

  私の質問は、それは二番目ですdivは、第1のものを重ね合わせることによって「ぼかし」することができる。

  .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; 
   
  }

  <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>

  ご協力いただきありがとうござい

Answer 1

何これは？ まず、作成するマスクの位置グリッドを維持するために、スパンにサイズを指定します。 マスク.maskを作成し、3つの部分に分割します。中間の部分は、マスクを通して見えるようになり、透明な背景になります。 したがって中間部分はスパンと同じサイズになりますが、その前と後にはcalc((100 - spansize)/2)の色付きの背景とぼかしが表示されます。 マスクはかなり完成していますが、それを親の幅の200％にしましたので、移動すると常にピンに留まります。

次に、必要なときに各番号を表示するために、左に0％から100％を移動するためにJSに頼ります。

.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; 
 
}

<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>

それが役に立てば幸い！