小編給大家分享一下怎么利用css來(lái)設(shè)置文本的背景顏色，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

10年的商洛網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整商洛建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“商洛網(wǎng)站設(shè)計(jì)”,“商洛網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

首先我們先來(lái)看看這個(gè)代碼：

background-color:屬性設(shè)置元素的背景顏色（值有三種：color_name：(英文顏色名)\hex_name：#000000（十六進(jìn)制字符顏色）\rgb_name：255.0.0（不常用））

來(lái)看個(gè)關(guān)于文本背景的實(shí)例：

	

	
這里是創(chuàng)新互聯(lián)，很多精品編程教程等著你學(xué)習(xí)

設(shè)置這個(gè)的效果應(yīng)該很明顯，我們來(lái)看在谷歌瀏覽器中顯示的效果：

看圖，我們很明顯看到，網(wǎng)頁(yè)顯示的部分都變紅了。這是因?yàn)槲以赽ody中設(shè)置了css的背景樣式，使得整個(gè)body主體部分都是紅色，這樣是不是很明顯。

我們?cè)賮?lái)看看如何設(shè)置文本背景效果吧：（這還有代碼）

這里是創(chuàng)新互聯(lián)，很多精品編程教程等著你學(xué)習(xí)
這里是創(chuàng)新互聯(lián)，很多精品編程教程等著你學(xué)習(xí)
這里是PHP中文
網(wǎng)，很多精品編程教程等著你學(xué)習(xí)

我們把上圖的給body加的樣式現(xiàn)在給了p標(biāo)簽，這樣會(huì)發(fā)生什么呢，一起來(lái)看下效果：

因?yàn)閜標(biāo)簽是塊級(jí)元素，所以我們這的顯示效果就是一段話就是占據(jù)一整行。我們?cè)趤?lái)試試別的行內(nèi)標(biāo)簽的元素看看情況，同樣的代碼，不一樣的標(biāo)簽，我們來(lái)看看：

這里是創(chuàng)新互聯(lián)，很多精品編程教程等著你學(xué)習(xí)
這里是創(chuàng)新互聯(lián)，很多精品編程教程等著你學(xué)習(xí)

這是把上圖中的第一個(gè)p標(biāo)簽改為span標(biāo)簽了，我們來(lái)對(duì)比下看看：

我把span的css樣式改為藍(lán)色，就是我們現(xiàn)在看到的效果了，一個(gè)是行內(nèi)標(biāo)簽，是文本到哪背景就到哪的，另一個(gè)是塊級(jí)元素，不管你有沒(méi)有到一行，背景都是一行顯示。（想看更多css樣式相關(guān)的知識(shí)，就到創(chuàng)新互聯(lián)css學(xué)習(xí)手冊(cè)欄目學(xué)習(xí)）

說(shuō)了這么多來(lái)設(shè)計(jì)背景顏色，現(xiàn)在我們說(shuō)說(shuō)背景圖片的代碼吧：

• backgroud-image:URL（圖片地址）為元素設(shè)置背景圖像

• backgroud-repeat:設(shè)置是否或者如何重復(fù)背景圖像（repeat、repeat-x（沿著水平方向重復(fù)）\repeat-y（垂直平鋪）\no-repeat（不平鋪））

• backgroud-position:設(shè)置背景圖像的起始位置(top,bottom,left,right,center,%\px)

已經(jīng)把我自己對(duì)這些個(gè)屬性的了解已經(jīng)寫(xiě)在上面了。大家看著介紹應(yīng)該就能知道用法了，但是我們還是要演示一下給大家看的，我們就一起演示了：

這里是創(chuàng)新互聯(lián)，很多精品編程教程等著你學(xué)習(xí)

因?yàn)闆](méi)有圖片，就不發(fā)效果了，大家自己設(shè)置就行了，上面有正常使用的值都在里面。

看完了這篇文章，相信你對(duì)怎么利用css來(lái)設(shè)置文本的背景顏色有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！