CSS背景background使用方法

一、Css background背景語法

CSS背景基礎知識

CSS 背景這里指通過CSS對對象設置背景屬性，如通過CSS設置背景各種樣式。

背景語法：

background: background-color || background-image || background-repeat || background-attachment ||?background-position

CSS中背景單詞：

background CSS手冊查詢-background
background-color 設置顏色作為對象背景顏色
background-image 設置圖片作為背景圖片
background-repeat 設置背景平鋪重復方向
background-attachment 設置或檢索背景圖像是隨對象內容滾動還是固定的。
background-position 設置或檢索對象的背景圖像位置。

Background背景樣式的值是復合屬性值組合，也就是背景單詞的值可以跟多個屬性值，值與值之間使用一個空格間隔鏈接上即可。
如：

background:#000 url(圖片地址) no-repeat left top

Css background背景作用：

1、設置純色背景。背景background可以設置對象純色的背景顏色，
2、設置圖為背景。可以設置對象背景為圖片，如果背景是圖片可以讓圖片重復平鋪橫鋪，或將圖片作為對象背景固定在對象任何位置。

設置網頁背景樣式

Html原始背景與CSS背景對照
Html是指對應效果的table背景設置

Html背景單詞：

Bgcolor設置背景顏色 與CSS背景顏色對應background-color
Background設置圖片作為背景與CSS背景圖片對應background-image

二、背景顏色

background-color:#FFF

設置對象背景為純白色

如果是給table設置背景顏色可以使用bgcolor="顏色值"即可設置對象背景顏色。
如果是CSS背景顏色，可使用background-color:顏色值;或 background:顏色值設置對象背景顏色。

三、CSS圖片背景

CSS可以使用background或background-image直接引用圖片地址來設置圖片作為對象背景。

background:url(http://www.manongjc.com/logo.gif);

設置LOGO圖片作為背景

或

background-image:url(http://www.manongjc.com/logo.gif);

具有相同效果。這樣設置圖片作為背景有個缺陷就是圖片會上下左右的重復。

background-attachment使用解析：

background-attachment:fixed； 背景固定

background-attachment:scroll； css背景圖片是隨對象內容滾動

圖片background背景語法：

background-image :url (url)

background-image :url (http://www.manongjc.com/logo.gif）

設置對象背景為圖片http://www.manongjc.com/logo.gif

如果圖片作為背景時候要求是否重復平鋪，平鋪方向等我們都需要background-position和background-repeat配合使用

div{background-image :url (http://www.manongjc.com/logo.gif);
background-repeat : no-repeat;background-position : 5px 6px } 

這里定義對象div，背景圖片為http://www.manongjc.com/logo.gif，并且背景圖片不重復，定位于div對象靠左距離5px，靠上距離6px

四、背景居中

CSS 背景分為左右居中和上下居中。

背景圖像上下居中，可以使用計算上下高度然后平分設置，如上下高度距離為500px，那就設置圖片居頂部多少PX可以讓圖片實現上下居中。

五、復合背景樣式簡寫

我們使用時候都需要考慮到代碼優簡，這里可以優化的簡寫代碼

1、如果只設置背景為單一顏色

background-color:#FFF

我們簡寫為

background:#FFF

2、圖片設置為背景簡寫

background-image :url (http://www.manongjc.com/logo.gif);
background-repeat : no-repeat;background-position : 5px 6px 

我們簡寫為：

background:url (http://www.manongjc.com/logo.gif) no-repeat 5px 6px 

六、CSS background（背景）總結

使用圖片作為背景在一個網頁布局中常常會遇到，希望大家能在實際中掌握其知識。一般設置對象圖片作為背景屬性實例 background:#666 url(圖片地址) no-repeat center top ;（解釋首先設置背景顏色 緊跟設置圖片作背景 緊跟圖片是否重復 然后跟圖片在對象位置。前面的背景顏色可以不用設同時不是必須，一般使用圖片作為對象背景如果要設置圖片是否重復顯示距離位置將設置圖片位置）

1、設置圖片作為背景如果圖片設置圖片在X坐標方向重復，如果再設置圖片在對象位置的左或右位置時將無效，可設置在對象上或下位置開始顯示。

2、設置圖片作為背景如果圖片設置圖片在Y坐標方向重復，如果再設置圖片在對象位置的上或下位置時將無效，可設置圖片在對象左或右位置開始顯示。

3、如果設置背景完全重復顯示，那設置圖片在對象上下左右位置開始顯示將無線。

網頁布局時候我們常常對網頁背景設置顏色、背景設置圖片，達到我們需要的美觀效果，我們實踐制作寫css background背景盡量從簡，圖片引入時候注意路徑正確，如需定位對象背景。

經典背景復合屬性表達式：

.manongjc{background:#FFF url (http://www.manongjc.com/logo.gif) no-repeat 5px 6px} 

這里既設置背景顏色，背景圖片引入，背景圖片定位、圖片作為背景是否重復的樣式。

相關閱讀：

CSS 教程

CSS3 教程

CSS 參考手冊

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com