要素全体に影響を与えずに CSS でテキスト幅の背景を作成する方法

要素全体のカラーを使用せずに CSS でテキスト幅の背景を作成する

要素全体に拡張せずにテキスト幅の背景を実現するには、 CSS で課題を提示します。これを解決する方法は次のとおりです。

インライン要素内のテキストを分離する

HTML の変更が制限されているため、解決策はテキストをインライン要素内に制限することです。 のような要素。そうすることで、背景色の範囲をテキスト自体に制限します。

背景色をインライン要素に適用

テキストが

実装例

この手法を説明するために、次の改訂版を検討してください。 code:

HTML:

<h1 id="span-The-Last-Will-and-Testament-of-Eric-Jones-span"><span>The Last Will and Testament of Eric Jones</span></h1>

CSS:

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

テキストを で囲みます。背景色をスパンに適用すると、メイン要素の幅を変更せずにテキスト幅の背景を作成できます。

以上が要素全体に影響を与えずに CSS でテキスト幅の背景を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。