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

推薦する

dockerでビルドしたnacos1.3.0の実装

1. nacosデータベースを再開します。データベース名nacos_configユーザー名とパスワー...

VMware に Centos7 をインストールした後に外部ネットワークに ping できない問題を解決する

クラスターを構成する際に問題が発生しました。当初は 3 台の仮想マシンすべてが外部ネットワークに p...

CentOS 7.5 に Docker をインストールする詳細なチュートリアル

Docker入門Docker は、アプリケーションをより速く配信するのに役立つオープンソースのコンテ...

5分でReactルーティングについてお教えします

目次ルーティングとは純粋コンポーネントの基本的な使用純粋なコンポーネントの使用に関する注意事項ルーテ...

HTML 名、ID、クラス (フォーマット/アプリケーション シナリオ/機能) などの違いの紹介。

ページには多くのコントロール (要素またはタグ) があります。これらのタグをより便利に操作するには、...

面接官がmysqlのcharとvarcharの違いを尋ねたとき

目次charとvarcharの違いcharとvarcharの違い上記は、MySQL における cha...

Kubernetes の応用分野の概要

Kubernetes は、アプリケーションの移植性とハイブリッド クラウド/マルチクラウドの展開をサ...

スーパーバイザーウォッチドッグの使い方を3分で学ぶ

ソフトウェアとハ​​ードウェア環境centos7.6.1810 64ビット cat /etc/red...

MySQL Innodbの主な機能挿入バッファ

目次挿入バッファとは何ですか?挿入バッファのトリガー条件は何ですか?なぜ一意のインデックスにできない...

要素の$notifyポイントについての簡単な説明

当初の意図は、element-ui の $notify 通知をコンポーネントにカプセル化することでし...

Centos 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar の簡単な分析

Baiduクラウドディスク:リンク: https://pan.baidu.com/s/1hv5rUW...

Linux で Scala 環境を構築し、簡単な Scala プログラムを書く

Linux に Scala 環境をインストールするのは非常に簡単です。Ubuntu 環境であれば、さ...

マップタグパラメータの詳細な紹介と使用例

マップ タグはペアで表示する必要があります。 <map> ....</map>...

vue+elementUI で埋め込みテーブルを実装する方法の例

大学 4 年生のときのインターンシップ中に、表内のデータの番号をクリックすると、そのデータの下に新し...

HTML の空リンク href="#" と href="javascript:void(0)" の違い

# には位置情報が含まれます。デフォルトのアンカーは #top で、これは Web ページの上部です...