怎么利用css來設(shè)置文本的背景顏色

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

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

首先我們先來看看這個代碼：

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

來看個關(guān)于文本背景的實例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>創(chuàng)新互聯(lián)</title>
</head>
	<style type="text/css">
		body{background-color:red}
	</style>
<body>
	<p>這里是創(chuàng)新互聯(lián)，很多精品編程教程等著你學(xué)習(xí)</p>
</body>
</html>

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

怎么利用css來設(shè)置文本的背景顏色

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

我們再來看看如何設(shè)置文本背景效果吧：（這還有代碼）

</head>
<style type="text/css">
p{background-color:red}
</style>
<body>
<p>這里是創(chuàng)新互聯(lián)，很多精品編程教程等著你學(xué)習(xí)</p><p>這里是創(chuàng)新互聯(lián)，很多精品編程教程等著你學(xué)習(xí)</p><p>這里是PHP中文
網(wǎng)，很多精品編程教程等著你學(xué)習(xí)</p>
</body>

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

怎么利用css來設(shè)置文本的背景顏色

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

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

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

怎么利用css來設(shè)置文本的背景顏色

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

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

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)把我自己對這些個屬性的了解已經(jīng)寫在上面了。大家看著介紹應(yīng)該就能知道用法了，但是我們還是要演示一下給大家看的，我們就一起演示了：

<style type="text/css">
p{backgroud-image:url;backgroud-repeat:no-repeat;backgroud-position:top}<!--圖片地址的url;backgroud-repeat:no-repeat;不平鋪。backgroud-position:top，從上面開始背景圖像-->
</style>
<body>
<p>這里是創(chuàng)新互聯(lián)，很多精品編程教程等著你學(xué)習(xí)</p>
</body>

因為沒有圖片，就不發(fā)效果了，大家自己設(shè)置就行了，上面有正常使用的值都在里面。

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

文章題目：怎么利用css來設(shè)置文本的背景顏色
新聞來源：http://www.yijiale78.com/article6/pcheog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、軟件開發(fā)、網(wǎng)站改版、服務(wù)器托管、自適應(yīng)網(wǎng)站、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

怎么利用css來設(shè)置文本的背景顏色