html怎樣設(shè)置背景顏色？HTML背景顏色代碼詳細(xì)分析_0

2020-03-24 18:13:40

字體：大中小

供稿：網(wǎng)友

本篇文章使用了HTML的代碼和CSSyangshi_10628_1.html' target='_blank'>CSS樣式的代碼為大家展示了如何設(shè)置HTML的背景顏色，后面還有如何設(shè)置背景圖片的介紹。希望對(duì)大家有所幫助，現(xiàn)在我們一起來(lái)看這篇文章吧

首先我們先來(lái)看看關(guān)于HTML設(shè)置背景顏色：

我們首先設(shè)置一個(gè)背景顏色，把背景顏色設(shè)在body標(biāo)簽中我們來(lái)看看效果：

<!doctype html><html><head><meta charset="utf-8"><title>PHP </title></head><body bgcolor="black">這是PHP </body></html>

背景顏色設(shè)置成了黑色，大家能想到在瀏覽器中顯示的效果嗎？

沒(méi)錯(cuò)就是這個(gè)效果，什么都看不到了，我們看看把字體設(shè)置一個(gè)顏色，看看能不能顯示出來(lái)：

<body bgcolor="black"><p>這是<font color="#E41316">PHP </font></p></body>

現(xiàn)在我們來(lái)看看效果：

是不是很明顯，在字體里面加個(gè)顏色就能顯示出來(lái)文本，但是還有兩個(gè)字沒(méi)有加顏色，所以還是顯示不出來(lái)。

現(xiàn)在我們來(lái)看看如何制作文字的背景：

<body bgcolor="black"><p style="background-color: #E12125">這是PHP </p></body>

這時(shí)候的font標(biāo)簽已經(jīng)不管用了，所以我們果斷的使用了css樣式來(lái)改變背景顏色，看的出來(lái)吧，這是一個(gè)簡(jiǎn)單的css樣式，只設(shè)置了一個(gè)背景顏色。

我們來(lái)看看在瀏覽器中顯示的效果：

因?yàn)閜標(biāo)簽的原因，所以背景就把整個(gè)一行給全部占據(jù)了。這樣看起來(lái)效果更明顯點(diǎn)，所以我也就不框起來(lái)了，就當(dāng)把方法教給大家吧，我們用背景用不了這么多的時(shí)候，可以在p標(biāo)簽的外圍加上一個(gè)div標(biāo)簽，設(shè)置寬度為文字的寬度，這樣就不會(huì)讓文字背景成一行顯示了，這也是一種常用的方法之一。

當(dāng)然背景還可以使用圖片來(lái)做背景圖，我們來(lái)看看效果實(shí)例：

<!doctype html><html><head><meta charset="utf-8"><title>PHP </title></head><body style="background-image: url(http://img.VeVb.com/upload/article/000/000/003/5a9675a3b2106284.jpg)"><p>這是PHP </p></body></html>

這是在網(wǎng)上復(fù)制的一張圖，效果還是很明顯的，現(xiàn)在來(lái)看看實(shí)例：