多くの場合、透明度の設定やぼかしなど、写真の背景を加工する必要があります。 ただし、背景画像が配置されているタグにこれらの効果を直接設定すると、これらのスタイルは子タグに継承されます。 例1: 背景ラベルにぼかし効果を設定すると、サブラベルのテキストに影響します。 <スタイル> 。親{ 背景: url('./test.jpg') 繰り返しなし 中央; フィルター: ぼかし(3px) } 。息子{ フィルター: ぼかし(0); /* 子タグに同じ属性を設定しても、継承されたスタイルを上書きすることはできません*/ } </スタイル> <div class="parent"> <p class="son">こんにちは</p> </div> 解決: 親タグにタグを追加し、絶対配置にして親タグを塗りつぶし、タグに背景/スタイルを設定します。 <スタイル> 。親{ 位置: 相対的; /*親タグを相対的に配置して、.middle を相対的に配置します*/ } 。真ん中{ 背景: url('./test.jpg') 繰り返しなし 中央; フィルター: ぼかし(3px); 位置: 絶対; 高さ: 100%; 幅: 100%; Zインデックス: -1; /*他のサブ要素を覆わないようにレイヤーの高さを減らします*/ } 。息子{ } </スタイル> <div class="parent"> <div class="middle"></div> <p class="son">こんにちは</p> </div> CSS3 を使って背景画像にマスクを設定し、マスク スタイルの継承の問題を解決する方法についての記事はこれで終わりです。CSS3 背景画像マスクの詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: フラッシュコンテンツの表示に使用される OBJECT タグと EMBED タグの違いの紹介
スクリプトを書く目的は、さまざまなサービスを手動で起動しなくて済むようにすることです(怠惰のためでも...
この記事では、例を使用して MySQL 正規表現 (regexp および rlike) の検索機能を...
1. MySQLデータベースnacos_configを作成する2. データベース nacos_con...
Dockerfile は Docker イメージを構築するために使用されるファイルです。コマンドパラ...
実施原則メイングラフィックは、背景と前景の 2 つの要素で構成されています。次のサンプルコードでは、...
この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...
ミラーリングも Docker のコアコンポーネントの 1 つです。ミラーリングはコンテナ操作の基盤で...
vim の動作モードを設定する (一時的) :set (モード情報) :set nu — 行番号を表...
1.MySqlをダウンロードしてインストールする公式ウェブサイトからMySqlデータベースをダウンロ...
オールラウンドなシステム監視ツール dstat dstat は、vmstat、iostat、nets...
ウェブフロントエンド最適化のベストプラクティス: コンテンツWebフロントエンド最適化のベストプラク...
親ディレクトリを指定する方法../ はソース ファイルの親ディレクトリを表し、../../ はソース...
質問: インデックスは作成されているのに、Like ファジー クエリがまだ遅いのはなぜですか?インデ...
この記事の例では、セカンダリメニュー効果を実現するためのJSの具体的なコードを参考までに共有していま...
この記事では、参考までに、製品拡大鏡を実装するためのJavaScriptの具体的なコードを紹介します...