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