Discuz X修改背景讓圖片佈滿整個網頁背景

Denki

字體大小 16px

10px 32px

1、善用教程：DZ有很多教程，新手花點時間看看再動手，反而能省很多時間。
2、善用搜索：新手有問題，先到論壇中搜索一下，很多好心人都有解答。

今天分享修改背景的方法：
一、準備好背景圖片，背景圖片有兩種：
1、用小圖片平鋪整個背景，比如某種花紋。
2、只用一張大圖片做背景，比如節日圖片。

二、上傳圖片
1、進入後台管理——界面——風格管理——編輯——編輯，設置圖片在網站的保存目錄，或者留空表示使用 static/image/common/ 目錄，文件名不要衝突，如下圖。
2、將圖片上傳到設置的目錄中。


三、開始修改：
1、進入後台管理——界面——風格管理——編輯——編輯——背景——頁面背景
2、填寫圖片名稱（見下圖），如果前幾步沒錯，會在右側顯示效果。
3、最關鍵的一步是設置背景參數（見下圖），如果平鋪背景圖片直接留空，主要參數含義如下。
A、背景重複方式：

repeat	默認。背景圖像將在垂直方向和水平方向重複
repeat-x	背景圖像將在水平方向重複。
repeat-y	背景圖像將在垂直方向重複。
no-repeat	背景圖像將僅顯示一次。

B、背景滾動方式：

scroll	默認值。背景圖像會隨著頁面其餘部分的滾動而移動。
fixed	當頁面的其餘部分滾動時，背景圖像不會移動。

C、背景圖片X、Y點起始位置：

top left top center top right center left center center center right bottom left bottom center bottom right	如果您僅規定了一個關鍵詞，那麼第二個值將是"center"。
x% y%	左上角是 0% 0%。右下角是 100% 100%。 如果您僅規定了一個值，另一個值將是 50%。
xpos ypos	左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。 如果您僅規定了一個值，另一個值將是50%。

這裡舉幾個例子：
a、圖片從左上角平鋪：「repeat 0 0",因為默認值可省略，所以此時參數空白，效果也相同。
b、圖片不平鋪、水平居中：no-repeat  50% 0%。