設定背景顏色佔比 CSS系列之背景

通過 css 背景屬性，可以給頁面元素新增背景樣式。背景屬性可以設定背景顏色、背景、背景平鋪、背景位置、背景影象固定等。

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

/* 支援英語單詞,rgb,以及十六進製制顏色碼 */background-color:顏色值;

一般情況下元素背景顏色預設值是 transparent(透明)，我們也可以手動指定背景顏色為透明色。

/* 設定為透明色 */background-color: transparent;

示例:

css背景bodyh1p

這是乙個段落。background-image 屬性描述了元素的背景影象。實際開發常見於 logo 或者一些裝飾性的小或者是超大的背景, 優點是非常便於控制位置.

background-image : none | url (url)

屬性講解:值描述

url('url')

指向影象的路徑。

none

預設值。不顯示背景影象。

示例:

css背景body

如果需要在 html 頁面上對背景影象進行平鋪，可以使用 background-repeat 屬性。

background-repeat: repeat | no-repeat | repeat-x | repeat-y

引數講解:值描述

repeat

預設。背景影象將在垂直方向和水平方向重複(平鋪)。

repeat-x

背景影象將在水平方向重複(平鋪)。

repeat-y

背景影象將在垂直方向重複(平鋪)。

no-repeat

背景影象將僅顯示一次(不平鋪)。

示例:

css背景body

repeat-y 設定只有垂直方向重複 background-image利用 background-position 屬性可以改變在背景中的位置。

background-position: x y;

引數代表的意思是：x 座標和 y 座標。可以使用方位名詞或者精確單位

引數講解:

示例:

css背景body

注意：該屬性工作在 firefox 和 opera, background-attachment 屬性會被設定為 "fixed"。注意:

1.引數是方位名詞如果指定的兩個值都是方位名詞，則兩個值前後順序無關，比如 left top 和 top left 效果一致如果只指定了乙個方位名詞，另乙個值省略，則第二個值預設居中對齊2.引數是精確單位如果引數值是精確座標，那麼第乙個肯定是 x 座標，第二個一定是 y 座標如果只指定乙個數值，那該數值一定是 x 座標，另乙個預設垂直居中3.引數是混合單位如果指定的兩個值是精確單位和方位名詞混合使用，則第乙個值是 x 座標，第二個值是 y 座標

background-attachment屬性設定背景影象是否固定或者隨著頁面的其餘部分滾動。

background-attachment : scroll | fixed

屬性講解:值描述

scroll

預設值。背景影象會隨著頁面其餘部分的滾動而移動。

fixed

當頁面的其餘部分滾動時，背景影象不會移動。

示例:

css背景body

背景是固定的。嘗試向下滾動頁面。背景是固定的。嘗試向下滾動頁面。

背景是固定的。滾動頁面的時候,背景不會隨著網頁的滾動而滾動。

為了簡化背景屬性的**，我們可以將這些屬性合併簡寫在同乙個屬性 background 中。從而節約**量. 當使用簡寫屬性時，沒有特定的書寫順序,一般習慣約定順序為：

background: transparent url(image.jpg) repeat-y fixed top ;

這是實際開發中，我們更提倡的寫法。

css3 為我們提供了背景顏色半透明的效果。

background: rgba(0, 0, 0, 0.3);

•最後乙個引數是 alpha 透明度，取值範圍在 0~1之間•我們習慣把 0.3 的 0 省略掉，寫為 background: rgba(0, 0, 0, .3);•注意：背景半透明是指盒子背景半透明，盒子裡面的內容不受影響•css3 新增屬性，是 ie9+ 版本瀏覽器才支援的•但是現在實際開發,我們不太關注相容性寫法了,可以放心使用

屬性描述

background

在乙個宣告中設定所有的背景屬性。

background-attachment

設定背景影象是否固定或者隨著頁面的其餘部分滾動。

background-color

設定元素的背景顏色。

background-image

設定元素的背景影象。

background-position

設定背景影象的開始位置。

background-repeat

設定是否及如何重複背景影象。

background-clip

規定背景的繪製區域。

background-origin

規定背景的定位區域。

background-size

規定背景的尺寸。

設定背景顏色佔比 CSS系列之背景

CSS學習之「顏色和背景」

CSS之背景設定background

css樣式設定滑鼠選中後字型顏色以及背景顏色

設定背景顏色佔比 CSS系列之背景

CSS學習之「顏色和背景」

CSS之背景設定background

css樣式設定滑鼠選中後字型顏色以及背景顏色

相關推薦