Drupla 利用 DIV 區塊 CSS 設定網頁背景圖

Drupla 的版面外觀樣式(版型),主要是由所使用的 theme(主題) 決定的,有些 theme 只有配色方案,沒有配圖方案,不能很方便地使用背景圖,對於習慣使用舊式舖排滿頁的背景圖的我而言,是有些不足。但是不想因此安裝一個新 theme 或是 module(模組),只好另想辦法,看看 CSS 能不能做到了。

嘗試過在 body 標籤中指定 background,後來發現用 DIV background-image 更方便。底下嘗試範例:

先新增一篇文章:管理>內容>新增內容>文章

輸入文字,並指定文字格式為「Full HTML」及「Source」來編輯網頁原始碼

然後開始插入背景圖片。可以插入圖片的按鈕有兩個,上方一個在 source 編輯時呈灰色無作用,就能用下方一個。

自上方按鈕插入圖片:(注意都得輸入替代文字

或者自下方按鈕插入圖片:

加上圖片的畫面,顯然圖片是在前景:

按下 source 按鈕來編輯 CSS 語法,用 DIV 讓圖片由前景轉成背景。

原本是前景圖的HTML語法:
<p>我要背景圖!<img alt="背景" data-entity-type="file" data-entity-uuid="6687b83d-0e96-44db-a3cd-e4eda77a03ac" src="/drupal8/sites/default/files/inline-images/5-120601095139-50.gif" /></p>

轉成背景圖的 CSS 語法:
<div style="background-image:url( /drupal8/sites/default/files/inline-images/5-120601095139-50.gif ); repeat">
<p>我要背景圖!</p></div>

至於結果畫面就不截圖了,可藉由source按鈕開啟( )或關閉( )來查看語法呈現結果。最後那個 repeat 是控制圖片要怎麼重複的 CSS 語法參數,底下是常用到的部分列表,請自行參照。

CSS background-repeat 方向與重覆參數

參數 說明
background-repeat: repeat; 預設重覆方式,背景圖片依 x 軸與 y 軸重覆呈現。
background-repeat: repeat-x; 背景圖片沿 x 軸重覆呈現。
background-repeat: repeat-y; 背景圖片沿 y 軸重覆呈現。
background-repeat: no-repeat; 背景圖片不重覆出現,也就是只出現一次。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *