CSS背景background實例_html/css

一、Css background背景語法

CSS背景基礎(chǔ)知識

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

背景語法：

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

CSS中背景單詞：

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

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

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

Css background背景作用：

1、設(shè)置純色背景。背景background可以設(shè)置對象純色的背景顏色，
2、設(shè)置圖為背景。可以設(shè)置對象背景為圖片，如果背景是圖片可以讓圖片重復平鋪橫鋪，或?qū)D片作為對象背景固定在對象任何位置。

設(shè)置網(wǎng)頁背景樣式

Html原始背景與CSS背景對照
Html是指對應(yīng)效果的table背景設(shè)置

Html背景單詞：

Bgcolor設(shè)置背景顏色 與CSS背景顏色對應(yīng)background-color
Background設(shè)置圖片作為背景與CSS背景圖片對應(yīng)background-image

二、背景顏色

background-color:#FFF

設(shè)置對象背景為純白色

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

三、CSS圖片背景

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

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

設(shè)置LOGO圖片作為背景

或

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

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

background-attachment使用解析：

background-attachment:fixed； 背景固定

background-attachment:scroll； css背景圖片是隨對象內(nèi)容滾動

圖片background背景語法：

background-image :url (url)

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

設(shè)置對象背景為圖片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 背景分為左右居中和上下居中。

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

五、復合背景樣式簡寫

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

1、如果只設(shè)置背景為單一顏色

background-color:#FFF

我們簡寫為

background:#FFF

2、圖片設(shè)置為背景簡寫

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（背景）總結(jié)

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

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

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

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

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

經(jīng)典背景復合屬性表達式：

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

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

相關(guān)閱讀：

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