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

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

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

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

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

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

テキストが < で分離されたら、 「span」を使用すると、インライン要素に背景色を簡単に適用できます。これにより、色がテキストの境界に限定されたままになります。

実装例

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

HTML:

<h1><span>The Last Will and Testament of Eric Jones</span></h1></p>
<p>CSS:</p>
<pre class="brush:php;toolbar:false">h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

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

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