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でテトリスゲームを作る

推薦する

CSS ボーダーは四隅の実装コードを追加します

1.html <div class="ログインボディ"> <...

MySQLトリガーの使用と理解

目次1. トリガーとは何ですか? 2. トリガーを作成するトリガーを作成するための構文は次のとおりで...

Docker構成 Alibaba Cloud Container Serviceの操作

Alibaba Cloud Dockerコンテナサービスの設定Alibaba Cloud Image...

親コンテナの CSS 均等分割 (完全三分の一) の実装

親コンテナの幅は固定されています。子要素が親の幅を均等に分割するには、どのような方法がありますか?コ...

Centos7 DockerでNginxファイルを変更するプロセスの詳細な説明

1. docker に nginx をインストールします。 docker に Nginx をインスト...

MySQL プロセス制御 IF()、IFNULL()、NULLIF()、ISNULL() 関数

MySQL では、IF()、IFNULL()、NULLIF()、および ISNULL() 関数を使用...

HTML で #include ファイルを使用する例

a.htmとb.htmの2つのファイルがあります。同じディレクトリ内のa.htmの内容は次のとおりで...

NavicatがMySQL8.0.11に接続するとエラー2059が発生する

間違いNavicat Premium を使用して MySQL に接続すると、次のエラーが発生します。...

Alibaba Cloud イメージリポジトリを使用して外部 Docker イメージを構築する方法の詳細な説明

Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...

ReactのPropsの簡単な比較

目次クラスコンポーネントのプロパティ比較浅い同等の浅い比較機能コンポーネントの簡単な比較先週面接に行...

mysql ワイルドカード (sql 高度なフィルタリング)

目次まず、値の一部と一致させるために使用される特殊文字であるワイルドカードについて簡単に紹介します。...

CSS3はブラウザのスクロールバーのスタイルを変更します

注意: この方法は、Webkit ベースのブラウザにのみ適用されます。ブラウザのスクロールバーが広す...

CSS3 クリックボタン円形進行ティック効果実装コード

目次8. CSS3 クリックボタンの円形進捗チェック効果8.1 画像プレビュー8.2 index.h...

Nginx 急ぎ購入 電流制限構成 実装分析

ビジネス上のニーズにより、急ぎの購入が発生することが多いため、ロード バランシング フロント エンド...

Centos 7 システムの Tomcat サーバーの詳細な分析

目次1. tomcatの起源1. Tomcat アプリケーションのシナリオ2. Tomcatに必要な...