網頁教學｜如何修改文字背景顏色

Table of Contents

有人跟我說他想要修改文字的背景顏色，但是當他使用網路上的語法，背景色會顯示【一整行】而不是【文字長度】。

本影片適合對象：不了解CSS display屬性的人。

影片簡介

有人跟我說他想要修改文字的背景顏色，但是當他使用網路上的語法

【語法：<p style=”background-color:yellow;”>我是一整行的背景色</p>】

背景色會顯示【一整行】而不是【文字長度】

我是一整行的背景色

我是文字長度的背景色

在W3School上的教學是使用<h1><p><div>這三個元素，一樣會顯示一整行的背景色，到底為什麼會這樣呢？

答案是因為<p><h1><div>這些標籤的display屬性預設為block

而block的特性：

現在我們來比較有沒有在style裡面加上dispaly:inline的差別

【語法：<h2 style=”background-color:skyblue”>我的display為預設的block</h2>】

【語法：<p style=”background-color:yellow;”> 我的display為預設的block</p>】

我的display為預設的blcok

【語法：<h2 style=”background-color:skyblue;display:inline;”>我的display屬性設為inline</h2>】

【語法：<p style=”background-color:yellow;display:inline;”> 我的display屬性設為inline</p>】

我們會發現雖然文字的背景色已經不是一整行了，但是後面原本是兩行的字變成一行。因為已經沒有占用一整行，所以後面的字會往前疊在一起。

這時候我們只要在裡面加上<span>，並將style寫在span裡面，就可解決這個問題了。

【語法：<h2><span style=”background-color:skyblue”>加上span後把style寫在裡面，就可以解決背景一整行的問題</span></h2>】

【語法：<p><span style=”background-color:yellow;”>加上span後把style寫在裡面，就可以解決背景一整行的問題</span></p>】