如何在不影響整個頁面寬度的情況下將背景顏色套用到元素中的文字？

DDD

發布： 2024-12-01 00:38:12

原創

715 人瀏覽過

How Can I Apply a Background Color to Text in an Element Without Affecting the Entire Page Width?

僅在CSS 中用於文字寬度的背景顏色

您希望在

中的文字後面應用綠色背景元素，但不跨越整個頁面寬度。您目前的以下程式碼無法實現此目的：

<h1>
  The Last Will and Testament of Eric Jones
</h1>

登入後複製

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

登入後複製

由於您無法修改HTML 以包含像這樣的內聯元素，解決方案是將文字轉換為內聯元素元素。這可以透過將文字包裝在中來實現。元素並對其應用綠色背景顏色：

<h1>
  <span>The Last Will and Testament of Eric Jones</span>
</h1>

登入後複製

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

登入後複製

內聯元素僅跨越其內容的寬度，確保綠色背景僅出現在文字後面，而不是整個頁面。

以上是如何在不影響整個頁面寬度的情況下將背景顏色套用到元素中的文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

來源：php.cn

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

中的文字後面應用綠色背景元素，但不跨越整個頁面寬度。您目前的以下程式碼無法實現此目的：<h1> The Last Will and Testament of Eric Jones </h1>登入後複製 h1 { text-align: center; background-color: green; }登入後複製