如何利用css來設定文本的背景顏色?css設定背景顏色代碼詳解

來源:互聯網
上載者:User
css設定文本的背景顏色代碼你知道嗎?這裡有詳細的css實現背景顏色的完整執行個體,讓你更容易理解這些屬性的含義到底是什麼,現在就讓我們一起來看下吧

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

background-color:屬性設定元素的背景顏色(值有三種:color_name:(英文顏色名)\hex_name:#000000(十六進位字元顏色)\rgb_name:255.0.0(不常用))

來看個關於文本背景的執行個體:

<!doctype html><html><head><meta charset="utf-8"><title>topic.alibabacloud.com</title></head><style type="text/css">body{background-color:red}</style><body><p>這裡是topic.alibabacloud.com,很多精品編程教程等著你學習</p></body></html>

設定這個的效果應該很明顯,我們來看在Google瀏覽器中顯示的效果:

看圖,我們很明顯看到,網頁顯示的部分都變紅了。這是因為我在body中設定了css的背景樣式,使得整個body主體部分都是紅色,這樣是不是很明顯。

我們再來看看如何設定文本背景效果吧:(這還有代碼)

</head><style type="text/css">p{background-color:red}</style><body><p>這裡是topic.alibabacloud.com,很多精品編程教程等著你學習</p><p>這裡是topic.alibabacloud.com,很多精品編程教程等著你學習</p><p>這裡是PHP中文網,很多精品編程教程等著你學習</p></body>

我們把的給body加的樣式現在給了p標籤,這樣會發生什麼呢,一起來看下效果:

因為p標籤是區塊層級元素,所以我們這的顯示效果就是一段話就是佔據一整行。我們在來試試別的行內標籤的元素看看情況,同樣的代碼,不一樣的標籤,我們來看看:

<body><span>這裡是topic.alibabacloud.com,很多精品編程教程等著你學習</span><p>這裡是topic.alibabacloud.com,很多精品編程教程等著你學習</p></body>

這是把中的第一個p標籤改為span標籤了,我們來對比下看看:

我把span的css樣式改為藍色,就是我們現在看到的效果了,一個是行內標籤,是文本到哪背景就到哪的,另一個是區塊層級元素,不管你有沒有到一行,背景都是一行顯示。(想看更多css樣式相關的知識,就到topic.alibabacloud.comcss學習手冊欄目學習)

說了這麼多來設計背景顏色,現在我們說說背景圖片的代碼吧:

  • backgroud-image:URL(圖片地址)為元素設定背景映像

  • backgroud-repeat:設定是否或者如何重複背景映像(repeat、repeat-x(沿著水平方向重複)\repeat-y(垂直平鋪)\no-repeat(不平鋪))

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

已經把我自己對這些個屬性的瞭解已經寫在上面了。大家看著介紹應該就能知道用法了,但是我們還是要示範一下給大家看的,我們就一起示範了:

<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>這裡是topic.alibabacloud.com,很多精品編程教程等著你學習</p></body>

因為沒有圖片,就不發效果了,大家自己設定就行了,上面有正常使用的值都在裡面。

好了,以上就是關於css樣式來設定文本的背景顏色的文章了,有問題的可以在下方提問。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.