この記事の内容: ページ中空マスクレイヤー、ページ中空マスクガイドレイヤー、画像中空マスク 通常のマスクレイヤー <!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 で絶対配置された要素が不可解に消えたりブロックされたりする問題を解決する方法
1. nacosデータベースを再開します。データベース名nacos_configユーザー名とパスワー...
クラスターを構成する際に問題が発生しました。当初は 3 台の仮想マシンすべてが外部ネットワークに p...
Docker入門Docker は、アプリケーションをより速く配信するのに役立つオープンソースのコンテ...
目次ルーティングとは純粋コンポーネントの基本的な使用純粋なコンポーネントの使用に関する注意事項ルーテ...
ページには多くのコントロール (要素またはタグ) があります。これらのタグをより便利に操作するには、...
目次charとvarcharの違いcharとvarcharの違い上記は、MySQL における cha...
Kubernetes は、アプリケーションの移植性とハイブリッド クラウド/マルチクラウドの展開をサ...
ソフトウェアとハードウェア環境centos7.6.1810 64ビット cat /etc/red...
目次挿入バッファとは何ですか?挿入バッファのトリガー条件は何ですか?なぜ一意のインデックスにできない...
当初の意図は、element-ui の $notify 通知をコンポーネントにカプセル化することでし...
Baiduクラウドディスク:リンク: https://pan.baidu.com/s/1hv5rUW...
Linux に Scala 環境をインストールするのは非常に簡単です。Ubuntu 環境であれば、さ...
マップ タグはペアで表示する必要があります。 <map> ....</map>...
大学 4 年生のときのインターンシップ中に、表内のデータの番号をクリックすると、そのデータの下に新し...
# には位置情報が含まれます。デフォルトのアンカーは #top で、これは Web ページの上部です...