建企業網站時離不開網頁設計，而圖片在網頁設計中又是不可或缺的組成部分。在主流的網頁排版中一般會使用CSS來控制頁面中圖片的顯示，如平鋪、覆蓋、局部、重復等操作。如何通過CSS樣式屬性來控制背景圖片的重復與否，其實在CSS屬性中可以使用background-repeat來定義背景圖片的重復屬性。

CSS背景圖片控制屬性：
background-repeat:repeat-x|repeat-y|no-repeat

?repeat-x：圖片在x軸方向上重復。
?repeat-y：圖片在y軸方向上重復。
?no-repeat：不平鋪，圖片只顯示一次。

//div背景圖片不重復
<style>
.demo{
width:500px;height:600px;margin:0 auto;
background-image:url(
background-repeat:no-repeat; 
}
</style>
<div class="demo"></div>

如上，在類名為'demo'的盒子里添加一個名為'logo.png'的圖片做為背景圖，并通過background-repeat的不重復屬性'no-repeat'設置背景圖片不重復。

CSS中，背景樣式主要包括背景顏色和背景圖像。在傳統的布局中，只能使用少數的標簽來定義背景圖像和背景顏色。但是隨著Web2.0時代的到來，設置背景樣式不再使用傳統HTML屬性來定義，轉而使用無限制、更靈活的CSS來定義。

目標

• 設置背景顏色
• 設置背景圖片
• 操作背景圖片樣式

背景顏色-background-color

在CSS中，使用background-color屬性來定義元素的背景顏色。

語法：background-color:顏色值;

說明：顏色值是一個關鍵字或一個16進制的RGB值。

背景圖像--background-image

在CSS中，使用background-image屬性來定義元素的背景圖片。

語法：background-image:url("圖像地址");

說明：圖像地址可以是相對地址，也可以是絕對地址。

注意：給某個元素設置背景圖像，元素要有一定的寬度和高度，背景圖片才會顯示出來。如果設置的元素的寬高過小，背景圖片就無法完整地顯示出來了。

背景重復樣式--background-repeat

在CSS中，使用background-repeat屬性可以設置背景圖像是否平鋪，并且可以設置如何平鋪。

語法：background-repeat:取值;

當值是repeat，全屏覆蓋

當值是repeat-x，x軸方向覆蓋

當值是repeat-y，y軸方向覆蓋

當值是no-repeat，不復制

背景圖片位置--background-position

在CSS中，使用background-position設置背景圖像的位置

語法：background-positon:像素值/關鍵字;

說明：語法中的取值包括兩種，一種是采用像素值，另一種是關鍵字描述。

1. 像素值

要設置水平方向數值（x軸）和垂直方向數值（y軸），參數如下

假設設置一個距離左上角水平方向100px，垂直方向100px

效果如下

2. 關鍵字

當background-position取值為關鍵字時，也需要設置水平方向和垂直方向的值，只不過值不是使用px為單位的數值，而是使用關鍵字代替。

假設我們要設置一個水平方向、垂直方向都居中的位置，就可以這樣設置

這樣他就永遠都處于屏幕的正中間

背景固定樣式--background-attachment

在CSS中，使用背景附件屬性background-attachment可以設置背景圖像是隨對象滾動還是固定不動

語法：background-attachment:scroll/fixed;

說明：background-attachment 屬性只有2個屬性值。scroll表示背景圖像隨對象滾動而滾動，是默認選項；fixed表示背景圖像固定在頁面不動，只有其他的內容隨滾動條滾動。

總結

午制作網頁時，寫了一個利用 CSS3 實現網頁背景顏色漸變的效果，晚上整理代理時，發現這效果還挺好玩的。記錄下來，以后再寫這種網頁背景顏色漸變的效果時，只能復制就行了。

網頁背景顏色的漸變，利用了 CSS3 中的 Gradients 屬性，下面飛鳥慕魚就來詳細的說一說哦。

CSS3 的漸變效果有兩種，分別為：Linear Gradients(線性漸變) 和 Radial Gradients(徑向漸變)。

CSS3 linear-gradient定義和用法

Linear Gradients 定義：用線性漸變創建一個背景圖像

語法：

background-image: linear-gradient(point,color1,color2,.....);

參數：

point：(可選)為漸變的坐標值，如省略則默認從上到下漸變，

color：為顏色值，可以寫入多個，如：red，#fff

1、CSS3 背景顏色四個方向的線性漸變

/**默認向下漸變*/
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);

運行結果：