CSS Backgrounds 背景 i火吧css

2021-10-24 07:30:50 字數 1563 閱讀 1391

css 背景

css 背景屬性用於定義html元素的背景。

css 屬性定義背景效果:

background-color

background-image

background-repeat

background-attachment

background-position

背景顏色

background-color 屬性定義了元素的背景顏色.

頁面的背景顏色使用在body的選擇器中:

例項body

嘗試一下 »

css中,顏色值通常以以下方式定義:

十六進製制 - 如:"#ff0000"

rgb - 如:「rgb(255,0,0)」

顏色名稱 - 如:「red」

以下例項中, h1, p, 和 div 元素擁有不同的背景顏色:

例項h1

p div

嘗試一下 »

背景影象

background-image 屬性描述了元素的背景影象.

預設情況下,背景影象進行平鋪重複顯示,以覆蓋整個元素實體.

頁面背景設定例項:

例項body

嘗試一下 »

下面是乙個例子是乙個糟糕的文字和背景影象組合。文字可讀性差:

例項body

嘗試一下 »

背景影象 - 水平或垂直平鋪

預設情況下 background-image 屬性會在頁面的水平或者垂直方向平鋪。

一些影象如果在水平方向與垂直方向平鋪,這樣看起來很不協調,如下所示:

例項body

嘗試一下 »

如果影象只在水平方向平鋪 (repeat-x), 頁面背景會更好些:

例項body

嘗試一下 »

背景影象- 設定定位與不平鋪

css backgrounds(背景)

讓背景影象不影響文字的排版

如果你不想讓影象平鋪,你可以使用 background-repeat 屬性:

例項body

嘗試一下 »

以上例項中,背景影象與文字顯示在同乙個位置,為了讓頁面排版更加合理,不影響文字的閱讀,我們可以改變影象的位置。

可以利用 background-position 屬性改變影象在背景中的位置:

例項body

嘗試一下 »

背景- 簡寫屬性

在以上例項中我們可以看到頁面的背景顏色通過了很多的屬性來控制。

為了簡化這些屬性的**,我們可以將這些屬性合併在同乙個屬性中.

背景顏色的簡寫屬性為 「background」:

例項body

嘗試一下 »

當使用簡寫屬性時,屬性值的順序為::

background-color

background-image

background-repeat

background-attachment

background-position

以上屬性無需全部使用,你可以按照頁面的實際需要使用.

這個例項使用了先前介紹的css,你可以檢視相應例項: css 例項

受挫時背背激勵語錄

據說是可以激勵人的一生 1 不問收穫,只問耕耘。如同種樹,先有根莖,再有枝葉,爾後花實,好好勞動,不要想太多,那樣只會使人膽小 懶惰 2 體育鍛煉可以 有時可以迅速 使人樂觀 科學實驗證明 3 勤奮,機會,樂觀是成功的三要素。注意 傳統觀念認為勤奮和機會是成功的要素,但是經過統計學和成功人士的分析得...

受挫時背背激勵語錄

1 不問收穫,只問耕耘。如同種樹,先有根莖,再有枝葉,爾後花實,好好勞動,不要想太多,那樣只會使人膽小 懶惰 2 體育鍛煉可以 有時可以迅速 使人樂觀 科學實驗證明 3 勤奮,機會,樂觀是成功的三要素。注意 傳統觀念認為勤奮和機會是成功的要素,但是經過統計學和成功人士的分析得出,樂觀是成功的第三要素...

TextureBackground紋理背景節點

texturebackground紋理背景節點用於定義x3d世界中天空和地面顏色及太空角和地面角。在太空盒地面之間,設定一幅三維立體空間影象並可以在其中放置各種三維立體造型和場景,可以通過對背景設定天空角和地面角及天空和地面顏色來產生天空和地面的效果。texturebackground紋理背景節點域...