この記事では、マスク レイヤーの中空化を実現する 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でテトリスゲームを作る
1.html <div class="ログインボディ"> <...
目次1. トリガーとは何ですか? 2. トリガーを作成するトリガーを作成するための構文は次のとおりで...
Alibaba Cloud Dockerコンテナサービスの設定Alibaba Cloud Image...
親コンテナの幅は固定されています。子要素が親の幅を均等に分割するには、どのような方法がありますか?コ...
1. docker に nginx をインストールします。 docker に Nginx をインスト...
MySQL では、IF()、IFNULL()、NULLIF()、および ISNULL() 関数を使用...
a.htmとb.htmの2つのファイルがあります。同じディレクトリ内のa.htmの内容は次のとおりで...
間違いNavicat Premium を使用して MySQL に接続すると、次のエラーが発生します。...
Alibaba Cloud Image Repositoryを使用して外部イメージをダウンロードする...
目次クラスコンポーネントのプロパティ比較浅い同等の浅い比較機能コンポーネントの簡単な比較先週面接に行...
目次まず、値の一部と一致させるために使用される特殊文字であるワイルドカードについて簡単に紹介します。...
注意: この方法は、Webkit ベースのブラウザにのみ適用されます。ブラウザのスクロールバーが広す...
目次8. CSS3 クリックボタンの円形進捗チェック効果8.1 画像プレビュー8.2 index.h...
ビジネス上のニーズにより、急ぎの購入が発生することが多いため、ロード バランシング フロント エンド...
目次1. tomcatの起源1. Tomcat アプリケーションのシナリオ2. Tomcatに必要な...