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

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 で絶対配置された要素が不可解に消えたりブロックされたりする問題を解決する方法

推薦する

Vueコンポーネントは、写真やビデオをアップロードするためのサンプルコードをカプセル化します

まず依存関係をダウンロードします: cnpm i -S vue-uuid ali-oss画像フィール...

MySQLデータストレージプロセスパラメータの詳細な例

MySQL ストアド プロシージャ パラメータには、in、out、inout の 3 種類があります...

Vueカスタムディレクティブの詳細

目次1. 背景2. ローカルカスタム指示3. グローバルカスタム指示4.1 カスタムコマンドフック関...

ubuntu15.10 での hadoop2.7.2 の詳細なインストールと設定

Linux での Hadoop インストール チュートリアルはインターネットや書籍に多数ありますが、...

html.cssオーバーフローの包括的な理解

html.cssオーバーフローの包括的な理解XML/HTML コードコンテンツをクリップボードにコピ...

Nodejs-cluster モジュールの知識ポイントの概要と使用例

面接官から「NodeJS で複数のプロセスを開始する方法を教えてください」と尋ねられることがあります...

MySQLデータベースとOracleデータベース間のバックアップをインポートする

OracleデータベースからエクスポートされたデータをMySqlデータベースにインポートします。 1...

MySQL ロックの知識ポイントのまとめ

ロックの概念①. 現実世界では、鍵は外の世界から身を隠したいときに使う道具です。 ②. コンピュータ...

jQueryはシンプルなコメントエリアを実装します

この記事では、参考までに、簡単なコメントエリアを実装するためのjQueryの具体的なコードを紹介しま...

webpackコード断片化の実装

目次背景コモンズチャンクプラグイン分割チャンク構成リソースを非同期に読み込む要約する背景高性能なアプ...

CSS ピックアップ矢印、カタログ、アイコン実装コード

1. CSS その他のアイコンアイコンを作成するには 3 つの方法があります。写真css (小さな矢...

MySQL データベース データのロード 複数の用途

目次MySQL Load Dataの多様な用途1. LOAD の基本的な背景2. 基本パラメータをロ...

MySQL データベース JDBC プログラミング (Java は MySQL に接続します)

目次1. データベースプログラミングの基本条件2. Java でのデータベースプログラミング: JD...

MySQLでSQLクエリ文がどのように実行されるかを分析する

目次1. MySQL論理アーキテクチャの概要2. コネクタクエリキャッシュ4. パーサー5. オプテ...

カレンダーウィジェットのネイティブJS実装

この記事の例では、カレンダーウィジェットを実装するためのjsの具体的なコードを参考までに共有していま...