設定CSS背景重複顯示原來這麼簡單?前端工程師看過來!

設定CSS背景重複顯示原來這麼簡單?前端工程師看過來!

設定CSS背景重複顯示原來這麼簡單?前端工程師看過來!

 

前端工程師設定CSS背景時一定要會的常識之一!現在直接告訴你!

 

前端工程師利用CSS background-repeat 來設定背景圖片是否重覆顯示以及重覆顯示的方向,通常與 背景圖樣設定 (background-image) 搭配使用。若背景圖片是比較小的圖片,就可用 background-repeat 將小圖片自動佈滿整個網頁背景,這是相當普遍的節省頻寬設計方式 (但是圖片圖樣要單純一些,以免造成視覺上的雜亂);當背景圖片是一張具有顯示範圍較大的圖片,則可以用 background-repeat 的「no-repeat」指令,此可將圖片限制只顯示一次。

 

CSS background-repeat 基本語法如下:

background-repeat: 重複參數;

有四種可以使用的重複參數讓前端工程師來決定重複方向或是是否重複,分別為 repeat(預設值,圖片會沿著 x 軸與 y 軸重複)、repeat-x(圖片會沿著x軸重複)、repeat-y(圖片會沿著y軸重複) 以及 no-repeat (不重複)。以下是針對這四種參數的範例:

 

CSS background-repeat 各種參數的範例

See the Pen background-repeat-example by Tedutw (@Tedutw) on CodePen.

其實除了上例的四個參數,還有一個 inherit 屬性,是繼承父層屬性的意思。但是因為部分瀏覽器 (如IE) 不支援,可能造成部分的人開啟網頁發生排版錯誤、或是圖片呈現錯誤。所以很少人使用,因此在此省略不介紹。

 

其他常用 CSS background 背景屬性說明連結
1. 背景顏色設定 (background-color)
2. 背景圖樣設定 (background-image)
3. 背景重複設定 (background-repeat)
4. 背景固定模式設定 (background-attachment)
5. 背景圖片位置設定 (background-position)

延伸閱讀:

身為前端工程師的你,還不會將CSS背景固定?快進來學!

設定背景位置一點也不難!前端工程師必學知識不能錯過!

身為前端工程師的我,輕易設定背景顏色好容易!

特別企劃!! 網路行銷課程教你SEO小訣竅!! (上)

SEO優化小撇步:網址大解密,強化你的網站結構

Python課程的老師帶你分析谷歌跟蜻蜓計畫的愛恨情仇!

人人都能是工程師!台灣 IT 培訓中心推「找到工作再付學費」專案,要試試嗎?

 

本篇發表於 前端工程師教學 並標籤為 , , , , , 。將永久鏈結加入書籤。

發佈留言

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

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料