整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
建企業(yè)網(wǎng)站時(shí)離不開(kāi)網(wǎng)頁(yè)設(shè)計(jì)，而圖片在網(wǎng)頁(yè)設(shè)計(jì)中又是不可或缺的組成部分。在主流的網(wǎng)頁(yè)排版中一般會(huì)使用CSS來(lái)控制頁(yè)面中圖片的顯示，如平鋪、覆蓋、局部、重復(fù)等操作。如何通過(guò)CSS樣式屬性來(lái)控制背景圖片的重復(fù)與否，其實(shí)在CSS屬性中可以使用background-repeat來(lái)定義背景圖片的重復(fù)屬性。
CSS背景圖片控制屬性：
background-repeat:repeat-x|repeat-y|no-repeat
?repeat-x：圖片在x軸方向上重復(fù)。
?repeat-y：圖片在y軸方向上重復(fù)。
?no-repeat：不平鋪，圖片只顯示一次。
//div背景圖片不重復(fù)
<style>
.demo{
width:500px;height:600px;margin:0 auto;
background-image:url(
background-repeat:no-repeat;
}
</style>
<div class="demo"></div>如上，在類名為'demo'的盒子里添加一個(gè)名為'logo.png'的圖片做為背景圖，并通過(guò)background-repeat的不重復(fù)屬性'no-repeat'設(shè)置背景圖片不重復(fù)。
CSS中，背景樣式主要包括背景顏色和背景圖像。在傳統(tǒng)的布局中，只能使用少數(shù)的標(biāo)簽來(lái)定義背景圖像和背景顏色。但是隨著Web2.0時(shí)代的到來(lái)，設(shè)置背景樣式不再使用傳統(tǒng)HTML屬性來(lái)定義，轉(zhuǎn)而使用無(wú)限制、更靈活的CSS來(lái)定義。
目標(biāo)
在CSS中，使用background-color屬性來(lái)定義元素的背景顏色。
語(yǔ)法：background-color:顏色值;
說(shuō)明：顏色值是一個(gè)關(guān)鍵字或一個(gè)16進(jìn)制的RGB值。
HTML標(biāo)簽
背景顏色設(shè)置
效果
在CSS中，使用background-image屬性來(lái)定義元素的背景圖片。
語(yǔ)法：background-image:url("圖像地址");
說(shuō)明：圖像地址可以是相對(duì)地址，也可以是絕對(duì)地址。
注意：給某個(gè)元素設(shè)置背景圖像，元素要有一定的寬度和高度，背景圖片才會(huì)顯示出來(lái)。如果設(shè)置的元素的寬高過(guò)小，背景圖片就無(wú)法完整地顯示出來(lái)了。
設(shè)置背景圖片
效果
在CSS中，使用background-repeat屬性可以設(shè)置背景圖像是否平鋪，并且可以設(shè)置如何平鋪。
語(yǔ)法：background-repeat:取值;
取值
當(dāng)值是repeat，全屏覆蓋
全屏覆蓋
當(dāng)值是repeat-x，x軸方向覆蓋
x軸方向覆蓋
當(dāng)值是repeat-y，y軸方向覆蓋
y軸方向覆蓋
當(dāng)值是no-repeat，不復(fù)制
不復(fù)制
在CSS中，使用background-position設(shè)置背景圖像的位置
語(yǔ)法：background-positon:像素值/關(guān)鍵字;
說(shuō)明：語(yǔ)法中的取值包括兩種，一種是采用像素值，另一種是關(guān)鍵字描述。
1. 像素值
要設(shè)置水平方向數(shù)值（x軸）和垂直方向數(shù)值（y軸），參數(shù)如下
取值
假設(shè)設(shè)置一個(gè)距離左上角水平方向100px，垂直方向100px
背景圖片位置設(shè)置
效果如下
效果
2. 關(guān)鍵字
當(dāng)background-position取值為關(guān)鍵字時(shí)，也需要設(shè)置水平方向和垂直方向的值，只不過(guò)值不是使用px為單位的數(shù)值，而是使用關(guān)鍵字代替。
取值
假設(shè)我們要設(shè)置一個(gè)水平方向、垂直方向都居中的位置，就可以這樣設(shè)置
背景圖片位置設(shè)置
這樣他就永遠(yuǎn)都處于屏幕的正中間
效果
在CSS中，使用背景附件屬性background-attachment可以設(shè)置背景圖像是隨對(duì)象滾動(dòng)還是固定不動(dòng)
語(yǔ)法：background-attachment:scroll/fixed;
說(shuō)明：background-attachment 屬性只有2個(gè)屬性值。scroll表示背景圖像隨對(duì)象滾動(dòng)而滾動(dòng)，是默認(rèn)選項(xiàng)；fixed表示背景圖像固定在頁(yè)面不動(dòng)，只有其他的內(nèi)容隨滾動(dòng)條滾動(dòng)。
背景固定設(shè)置
效果
午制作網(wǎng)頁(yè)時(shí)，寫了一個(gè)利用 CSS3 實(shí)現(xiàn)網(wǎng)頁(yè)背景顏色漸變的效果，晚上整理代理時(shí)，發(fā)現(xiàn)這效果還挺好玩的。記錄下來(lái)，以后再寫這種網(wǎng)頁(yè)背景顏色漸變的效果時(shí)，只能復(fù)制就行了。
網(wǎng)頁(yè)背景顏色的漸變，利用了 CSS3 中的 Gradients 屬性，下面飛鳥(niǎo)慕魚(yú)就來(lái)詳細(xì)的說(shuō)一說(shuō)哦。
CSS3 的漸變效果有兩種，分別為：Linear Gradients(線性漸變) 和 Radial Gradients(徑向漸變)。
Linear Gradients 定義：用線性漸變創(chuàng)建一個(gè)背景圖像
語(yǔ)法：
background-image: linear-gradient(point,color1,color2,.....);
參數(shù)：
point：(可選)為漸變的坐標(biāo)值，如省略則默認(rèn)從上到下漸變，
color：為顏色值，可以寫入多個(gè)，如：red，#fff
1、CSS3 背景顏色四個(gè)方向的線性漸變
/**默認(rèn)向下漸變*/ background-image: linear-gradient( red , yellow); /**向上漸變*/ background-image: linear-gradient(to top ,red , yellow); /**向右漸變*/ background-image: linear-gradient(to right ,red , yellow); /**向左漸變*/ background-image: linear-gradient(to left ,red , yellow);
運(yùn)行結(jié)果：
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
