この記事では、マスク レイヤーの中空化を実現する 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でテトリスゲームを作る
データベーステーブルA: テーブル task_desc_tab を作成します ( id INT(11...
イメージを構築するこれまで、テストやデモンストレーションにさまざまなイメージを使用しました。多くの場...
目次チュートリアルシリーズ1. SQL言語の紹介と仕様2. データベース操作1. ライブラリを作成す...
1. web01にzabbix-agentをインストールするZabbix ウェアハウスをデプロイする...
システムの起動時に読み込む必要がある設定ファイル/etc/profile、/root/.bash_p...
方法1: Pycharmをダウンロードしてインストールするダウンロードアドレス: https://w...
Docker 公式ドキュメント: https://docs.docker.com/ Docker は...
1. MySQLをダウンロードするURL: https://dev.mysql.com/downlo...
キャンバスを使ってカラフルな時計を書いてみよう! 1. タイトル(1)時計のケースが与えられ、ページ...
覗き見の問題サーバーでは、IIS サービスが複数のサイトを展開していると仮定すると、サイトの 1 つ...
目次1. 遅いクエリ構成1-1. スロークエリを有効にする2. 遅いクエリSQLの分析を説明する3....
バックエンドは thinkphp3.2.3 フレームワークを使用します。他の言語を使用している場合は...
Dockerの概要Docker はオープンソースのソフトウェア展開ソリューションです。 Docker...
目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...
1. サーバー環境の構成: 1. ディスクパーティションを確認します。最近、あるプロジェクト内のサー...