CSS3マスクレイヤーのくり抜き効果を実現するさまざまな方法

CSS3マスクレイヤーのくり抜き効果を実現するさまざまな方法

この記事では、マスク レイヤーの中空化を実現する 4 つの方法を紹介します。みんなと共有し、自分用のメモを残してください。詳細は次のとおりです。

まずは効果を見てみましょう

【方法1:スクリーンショットシミュレーションの実装】

原理: まず同じ位置の写真を撮り、マスク レイヤーを作成してから、対応する位置に写真を配置します。

利点: 原理がシンプル、互換性が良好、IE6 および IE7 と互換性あり、複数の項目を同時にくり抜くことができます。

欠点: この方法は静的ページにのみ適しており、スクロール可能なページには適していません。また、コンテンツが変更になるページにも適していません。

コードは次のとおりです。

<div class="class1">
    <img src="images/000.jpg" alt=""/>
</div>

.class1{
    位置: 絶対;
    幅:100%;
    高さ:100%;
    上: 0;
    左: 0;
    背景色: #000;
    不透明度: 0.6;
    フィルター:アルファ(不透明度=60);
}
.class1 画像{
    位置: 絶対;
    上:260ピクセル;
    左: 208px;
}

【方法2:CSS3のシャドウプロパティの実装】

原則: CSS3 の shadow プロパティを使用します。

利点: 実装が簡単。あらゆるページに適しており、ページによって制限されません。

欠点: 互換性はあまり良くなく、IE9 とのみ互換性があります。

コードは次のとおりです。

<div class="class2"></div>

.class2{
    位置: 絶対;
    幅:170ピクセル;
    高さ:190px;
    上: 260px;
    左: 208px;
    ボックスシャドウ: rgba(0,0,0,.6) 0 0 0 100vh;
}

[方法3: CSS境界プロパティの実装]

原則: 境界プロパティを使用します。まず、空のボックスをターゲット領域に配置し、その周囲に境界線を塗りつぶします。

利点: 実装が簡単、互換性が良好、IE6 および IE7 と互換性あり、あらゆるページに適しており、ページによって制限されません。

デメリット: 互換性の実装プロセスは比較的複雑です。

コードは次のとおりです。

<div class="class3"></div>
.class3{
      位置: 絶対;
      幅:170ピクセル;
      高さ:190px;
      上: 0;
      左: 0;
      左境界線の幅:208px;
      左境界線のスタイル: solid;
      左境界線の色:rgba(0,0,0,.6);
      右ボーダーの幅:970px;
      右境界線のスタイル: solid;
      右境界線の色:rgba(0,0,0,.6);
      境界線の上部の幅:260px;
      ボーダー上部のスタイル: solid;
      上の境界線の色:rgba(0,0,0,.6);
      境界線下部の幅:253px;
      境界線下部のスタイル: solid;
      境界線の下の色:rgba(0,0,0,.6);
}

【方法4:SVGまたはキャンバス】

原則: SVG またはキャンバスの描画機能を使用します。

利点: 一度に複数をくり抜くことができます。

欠点: 互換性が低く、実装プロセスが比較的複雑です。

SVG を例にとると、コードは次のようになります。

<svg スタイル="位置: 絶対;" 幅="1366" 高さ="700">
    <定義>
        <マスクid="myMask">
            <rect x="0" y="0" 幅="100%" 高さ="100%" スタイル="stroke:none; 塗りつぶし: #ccc"></rect>
            <rect id="circle1" width="170" height="190" x='208' y="260" style="fill: #000" />
        </マスク>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill: rgba(0, 0, 0, 0.6); mask: url(#myMask)"></rect>
</svg>

CSS3 マスク レイヤー ホローイング効果を実現するさまざまな方法についての記事はこれで終わりです。CSS3 マスク レイヤー ホローイングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MYSQLはUnionを使用して2つのテーブルのデータを結合し、表示します。

>>:  CocosCreator Typescriptでテトリスゲームを作る

推薦する

MySQL テーブル作成外部キー エラーの解決方法

データベーステーブルA: テーブル task_desc_tab を作成します ( id INT(11...

Dockerfile を使用して Docker でイメージを構築する方法

イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...

MySQL シリーズ 4 SQL 構文

目次チュートリアルシリーズ1. SQL言語の紹介と仕様2. データベース操作1. ライブラリを作成す...

Linux zabbix エージェントの展開と設定方法の詳細な説明

1. web01にzabbix-agentをインストールするZabbix ウェアハウスをデプロイする...

Linux に起動方法を追加する (サービス/スクリプト)

システムの起動時に読み込む必要がある設定ファイル/etc/profile、/root/.bash_p...

Ubuntu 18.04 での Pycharm インストール チュートリアルの実装

方法1: Pycharmをダウンロードしてインストールするダウンロードアドレス: https://w...

Nuxt.jsプロジェクトのDockerデプロイメントの実装

Docker 公式ドキュメント: https://docs.docker.com/ Docker は...

Linux の Centos7 に Mysql5.7.19 をインストールする詳細なチュートリアル

1. MySQLをダウンロードするURL: https://dev.mysql.com/downlo...

カラフルな時計効果を実現する JavaScript キャンバス

キャンバスを使ってカラフルな時計を書いてみよう! 1. タイトル(1)時計のケースが与えられ、ページ...

Dockerを使用してコンテナリソースを制限する方法

覗き見の問題サーバーでは、IIS サービスが複数のサイトを展開していると仮定すると、サイトの 1 つ...

MySQL の遅いクエリの落とし穴

目次1. 遅いクエリ構成1-1. スロークエリを有効にする2. 遅いクエリSQLの分析を説明する3....

擬似静的およびクライアント適応型 Nginx の設定方法

バックエンドは thinkphp3.2.3 フレームワークを使用します。他の言語を使用している場合は...

Dockerコンテナの紹介

Dockerの概要Docker はオープンソースのソフトウェア展開ソリューションです。 Docker...

Podmanはコンテナを自動的に起動し、Dockerと比較します

目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...

Centos6 で 20TB を超えるディスクをパーティション分割してフォーマットするためのサンプル コード

1. サーバー環境の構成: 1. ディスクパーティションを確認します。最近、あるプロジェクト内のサー...