CSS教學分享文 – 重複背景圖之語法練習

各位同學好~

今天要來分享的 CSS 語法練習,其實是之前有一篇「固定背景圖教學文」的延伸版,這次要教大家利用上一篇的網頁版型,來做重複背景圖片的語法練習。

如果是第一次加入的新朋友,要請您先參考上一篇之後,再來 follow 本篇教學才會比較銜接得上喔!(傳送門在此 ↓↓↓)

CSS教學分享文 – 固定背景圖之語法練習

至於已經有練過的同學,也可以重新開啟上次做的網頁檔,其中會有一些雷同的基本結構或語法就可以直接複製套用,不必重打一遍喔~

在開始今天的練習之前,還要請大家先準備好兩張素材圖片,等一下需要用來分別當做水平重複及垂直重複的背景圖;

假如手邊沒有相關資源的話,可以參考一下之前小編整理過的免費圖樣網址,下載之後再做適當裁切即可使用。

【設計資源】- 春暖花開之免費 pattern 下載 – 共 10 組

【好站報報】 日本「FLAT ICON DESIGN」免費資源網站

這邊順便提供小編所使用的背景圖片尺寸,給同學們做個參考:「 bg1.png 」為 200 px * 350 px ,「 bg2.png 」為 50 px * 50 px 。

素材都備齊之後,我們就要進入正式的練習囉!Ready~~~ Go!

CSS 語法 - 網頁設計  - CSS教學分享文 – 重複背景圖之語法練習 - SNAG-ok


【步驟一】HTML 網頁架構

第一個步驟,依然是從建立 HTML 架構開始做起,第一次加入的新手同學請先參考下方圖示來編寫 :

CSS 語法 - 網頁設計  - CSS教學分享文 – 重複背景圖之語法練習 - p1

如果是已經練習過上一篇教學,且手邊正好也有檔案的同學,想要節省一點時間偷吃步的話,

只要在開啟上一篇教學練習中的 HTML 檔案後,將 原本<div id = “CONTENT”> 的下方,再新增一行 <div id = “INBOX”> 即可,(如圖示紅框處)

當然,不要忘記在 </body> 上面也要補上一個相對應的</div>喔!


【步驟二】可直接套用上一篇之 CSS 語法

在附加 CSS 外部樣式表 (「 layout.css 」) 之後,我們可先列出總共有哪些語法項目需要編寫。

CSS 語法 - 網頁設計  - CSS教學分享文 – 重複背景圖之語法練習 - p2

接下來,請開啟上次已練習過的「固定背景圖」-「 layout.css 」的檔案,因為有許多雷同的部分,我們可以直接複製後,貼在這邊;

CSS 語法 - 網頁設計  - CSS教學分享文 – 重複背景圖之語法練習 - p3

完成之後,語法部分應該會與下圖相符合:

CSS 語法 - 網頁設計  - CSS教學分享文 – 重複背景圖之語法練習 - p4

圖片中標示紅框處,是未完成的部分,其中包括這次範例中,要用來重複背景圖片的 CSS 語法設定,稍後留到下個步驟中我們再繼續編寫喔。

至於目前網頁在瀏覽器下的預覽,則是如下圖:

CSS 語法 - 網頁設計  - CSS教學分享文 – 重複背景圖之語法練習 - p5


【步驟三】重複背景圖片-水平式(x軸)

一開始,有請大家準備了兩張不同尺寸的圖片,

在這個步驟中,我們就先來利用尺寸較大的圖檔,做第一種「水平式」( x 軸)重複背景圖片的語法練習吧。

請參考下方圖示,在「 body 」中做 background 的 CSS 語法設定:

CSS 語法 - 網頁設計  - CSS教學分享文 – 重複背景圖之語法練習 - p6

這次的 background 寫法是直接使用較進階的縮寫方式,除了紅框標記處是這次教學文的新重點,其他縮寫的個別含意,都有在前一篇的教學文裏頭詳細解說過了;

如果還是不熟的同學,請回到前一篇做複習,小編這次就不多做解釋囉。

至於 padding-bottom 的設定,則與前一篇相同不變。

完成之後,網頁預覽如下:

CSS 語法 - 網頁設計  - CSS教學分享文 – 重複背景圖之語法練習 - SNAG-0001


【步驟四】完成 # INBOX 語法設定

由於在上一步驟中,選用了比較深的背景顏色及圖片,所以這邊先中途插播一下,我們先來完成 # INBOX 的版型設定:

CSS 語法 - 網頁設計  - CSS教學分享文 – 重複背景圖之語法練習 - p8

如圖示,紅框標示處就是這個步驟中添加的語法,大家可以從中學到,如何利用 background-color 語法的參數,來設定背景的「不透明度」喔。

這時,我們再來預覽一下網頁:

CSS 語法 - 網頁設計  - CSS教學分享文 – 重複背景圖之語法練習 - SNAG-0002

嗯~

整體看起來是不是比較有層次感了呢?!


【步驟五】重複背景圖片-垂直式(y軸)

做到這邊,檢視一下「 layout.css 」附加樣式表…,我們也只剩下一個地方還空著未完成!

沒錯~接下來的垂直式( y 軸)重複背景圖片,就是寫在 # CONTENT 裡面喔。

當然,要載入的圖片就是剩下的另外一張素材檔。

CSS 語法 - 網頁設計  - CSS教學分享文 – 重複背景圖之語法練習 - p10-1

做到這裏,這次分享的重複背景圖片語法練習,就可以收工啦。

CSS 語法 - 網頁設計  - CSS教學分享文 – 重複背景圖之語法練習 - SNAG-ok


希望同學們在接連做完這兩篇範例練習之後,

能夠對於背景圖片相關之 CSS 語法設定更加上手,

謝謝大家的觀看~下次見囉!

 

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , , .

迴響已被關閉。