設為首頁收藏本站

 取回密碼
 註冊
搜尋
熱搜: Redump discuz
檢視: 1468|回覆: 0

【轉貼】 Discuz X修改背景讓圖片佈滿整個網頁背景

[複製連結]
發表於 2021年2月10日 17:55:17 | 顯示全部內容 |閱讀模式
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%。
作者文章推薦
懶得打字嗎?讓本助手協助你 【使用進階編輯器請點選右方進階模式】
您需要登入後才可以回覆 登入 | 註冊

本版積分規則

手機版|Archiver|漁家小舖

GMT+8, 2024年4月26日 08:11 , Processed in 0.378837 second(s), 17 queries , Gzip On, Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回覆 返回頂端 返回清單