CSS3は背景画像にマスクを設定し、マスクスタイルの継承の問題を解決します。

CSS3は背景画像にマスクを設定し、マスクスタイルの継承の問題を解決します。

多くの場合、透明度の設定やぼかしなど、写真の背景を加工する必要があります。

ただし、背景画像が配置されているタグにこれらの効果を直接設定すると、これらのスタイルは子タグに継承されます。

例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 タグの違いの紹介

推薦する

Ubuntu で起動時に自動的に起動するシェル スクリプトを作成する (推奨)

スクリプトを書く目的は、さまざまなサービスを手動で起動しなくて済むようにすることです(怠惰のためでも...

MySQL 正規表現 (regexp と rlike) の検索機能の例分析

この記事では、例を使用して MySQL 正規表現 (regexp および rlike) の検索機能を...

Nacos で MySQL8 を設定する方法

1. MySQLデータベースnacos_configを作成する2. データベース nacos_con...

Dockerfile に基づいて Tomcat イメージを構築する方法

Dockerfile は Docker イメージを構築するために使用されるファイルです。コマンドパラ...

ホバー画像のポップアウトポップアップ効果を実現するための純粋な CSS のサンプルコード

実施原則メイングラフィックは、背景と前景の 2 つの要素で構成されています。次のサンプルコードでは、...

Vueはシンプルなマーキー効果を実装します

この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...

Docker イメージ管理の一般的な操作コード例

ミラーリングも Docker のコアコンポーネントの 1 つです。ミラーリングはコンテナ操作の基盤で...

Linux システムで Vim を使用してリモート ファイルを読み書きするコマンドの詳細な説明

vim の動作モードを設定する (一時的) :set (モード情報) :set nu — 行番号を表...

mysql8.0.23 msi インストールの超詳細なチュートリアル

1.MySqlをダウンロードしてインストールする公式ウェブサイトからMySqlデータベースをダウンロ...

Linux の総合システム監視ツール dstat の詳細な例

オールラウンドなシステム監視ツール dstat dstat は、vmstat、iostat、nets...

Webフロントエンドのパフォーマンス最適化

ウェブフロントエンド最適化のベストプラクティス: コンテンツWebフロントエンド最適化のベストプラク...

HTML相対パスの親ディレクトリと子ディレクトリの書き方

親ディレクトリを指定する方法../ はソース ファイルの親ディレクトリを表し、../../ はソース...

MySQLのファジークエリのような遅い速度を解決する方法

質問: インデックスは作成されているのに、Like ファジー クエリがまだ遅いのはなぜですか?インデ...

純粋なJSを使用してセカンダリメニュー効果を実現します

この記事の例では、セカンダリメニュー効果を実現するためのJSの具体的なコードを参考までに共有していま...

製品の拡大鏡効果を実現する JavaScript

この記事では、参考までに、製品拡大鏡を実装するためのJavaScriptの具体的なコードを紹介します...