Denki 發表於 2021年2月10日 17:55:17

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

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-repeat50% 0%。
頁: [1]
檢視完整版本: Discuz X修改背景讓圖片佈滿整個網頁背景