この記事の内容: ページ中空マスクレイヤー、ページ中空マスクガイドレイヤー、画像中空マスク 通常のマスクレイヤー <!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> 中空マスク層の効果は図に示されている。 ボックスシャドウを使用して中空マスクガイドレイヤー効果を実現します。 アドバンテージ:
デメリット: 影の可視領域はクリック イベントをトリガーできないため、マスクの任意の領域をクリックしても非表示にすることはできません。 <!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 で絶対配置された要素が不可解に消えたりブロックされたりする問題を解決する方法
まず依存関係をダウンロードします: cnpm i -S vue-uuid ali-oss画像フィール...
MySQL ストアド プロシージャ パラメータには、in、out、inout の 3 種類があります...
目次1. 背景2. ローカルカスタム指示3. グローバルカスタム指示4.1 カスタムコマンドフック関...
Linux での Hadoop インストール チュートリアルはインターネットや書籍に多数ありますが、...
html.cssオーバーフローの包括的な理解XML/HTML コードコンテンツをクリップボードにコピ...
面接官から「NodeJS で複数のプロセスを開始する方法を教えてください」と尋ねられることがあります...
OracleデータベースからエクスポートされたデータをMySqlデータベースにインポートします。 1...
ロックの概念①. 現実世界では、鍵は外の世界から身を隠したいときに使う道具です。 ②. コンピュータ...
この記事では、参考までに、簡単なコメントエリアを実装するためのjQueryの具体的なコードを紹介しま...
目次背景コモンズチャンクプラグイン分割チャンク構成リソースを非同期に読み込む要約する背景高性能なアプ...
1. CSS その他のアイコンアイコンを作成するには 3 つの方法があります。写真css (小さな矢...
目次MySQL Load Dataの多様な用途1. LOAD の基本的な背景2. 基本パラメータをロ...
目次1. データベースプログラミングの基本条件2. Java でのデータベースプログラミング: JD...
目次1. MySQL論理アーキテクチャの概要2. コネクタクエリキャッシュ4. パーサー5. オプテ...
この記事の例では、カレンダーウィジェットを実装するためのjsの具体的なコードを参考までに共有していま...