CSS で中空マスクレイヤーを実装するサンプルコード

この記事の内容: ページ中空マスクレイヤー、ページ中空マスクガイドレイヤー、画像中空マスク

通常のマスクレイヤー

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1、最小スケール=1、ユーザースケーラブル=いいえ">
    <title>タイトル</title>
    <スタイル>
        。マスク{
   位置: 絶対;
   幅: 100%;
   高さ: 100%;
   上: 0;
   左: 0;
   背景: rgba(0,0,0,0.4);
   ディスプレイ: フレックス;
   コンテンツの中央揃え: 中央;
   アイテムの位置を中央揃えにします。
   zインデックス: 3;
  }
  。マスク{
   位置:固定;
      上: 0;
      左: 0;
      下: 0;
      右:0;
      背景:rgba(0,0,0,.5); 
      /*背景:hsla(0,100%,80%,0.5)*/
      /*背景:#000; 不透明度:0.5; */
  }
  //ぼかし効果 すりガラス effect.blur{
   -webkit-filter: blur(5px); /* Chrome、Opera */
   -moz-filter:ぼかし(5px);
   -ms-filter:ぼかし(5px);    
   フィルター: ぼかし(5px);
  }
</スタイル>
</head>
<スタイル>

</スタイル>
<本文>

<div class='マスク'></div>

</本文>
</html>

中空マスク層の効果は図に示されている。

ボックスシャドウを使用して中空マスクガイドレイヤー効果を実現します。

アドバンテージ：

丸い角を簡単に実現できます。
Box-shadow は要素の位置には影響しません。配置はコンテンツの位置に応じて記述するだけで済みます。

デメリット: 影の可視領域はクリックイベントをトリガーできないため、マスクの任意の領域をクリックしても非表示にすることはできません。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1、最小スケール=1、ユーザースケーラブル=いいえ">
    <title>タイトル</title>
    <スタイル>
        。ガイド{
      位置: 絶対;
      zインデックス: 2;

   上: 0px;
      左: 50%;
      変換: translateX(-50%);
      
      幅: 50px;
      高さ: 50px;
      境界線の半径: 50px;
      境界線: 3px 実線 #2353FA;
      
      ボックスの影: 0px 0px 0px 1000px rgba(0,0,0,.75);
      ボックスのサイズ: 境界線ボックス;
    }
    </スタイル>
</head>
<スタイル>
</スタイル>
<本文>
<div class='ガイド'></div>
</本文>
</html>

境界線を使用して中空のマスクガイドレイヤー効果を実現します

デメリット: コード量が多い

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1、最小スケール=1、ユーザースケーラブル=いいえ">
    <title>タイトル</title>
    <スタイル>
     。ガイド{
      位置: 絶対;
      zインデックス: 2;
      .opacityEle{
        境界線: 700px 実線 rgba(0,0,0,0.75);
        幅: 50px;
        高さ: 50px;
        位置: 相対的;
        上: -700px;
        左: -538px;
        境界線の半径: 50%;
        .ele{
          幅: 50px;
          高さ: 50px;
          境界線: 3px 実線 #0B6EFF;
          境界線の半径: 25px;
          ボックスのサイズ: 境界線ボックス;
        }
      }
    }
    </スタイル>
</head>
<スタイル>

</スタイル>
<本文>

<div class='ガイド'>
 <div class='opacityEle'>
  <div class='ele'></div>
 </div>
</div>
</本文>
</html>

以上で、CSS で中空マスクレイヤーを実装するサンプルコードについての説明は終了です。CSS 中空マスクレイヤーの詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JavaScript フロントエンドのタイムアウト非同期操作に最適なソリューション

>>: IE6/7 で絶対配置された要素が不可解に消えたりブロックされたりする問題を解決する方法