關於Background-image與響應式


Posted by hoyi-23 on 2021-06-16

雖然說在CSS reset 上會加上

img{
    max-width: 100%;
    height: auto;
    }

使圖片自適應,那麼背景圖片該如何做到自適應呢?


什麼時機用背景圖片?

使用 img 標籤時機

  1. 希望別人列印頁面時候包含這張圖片。(當圖片本身屬於網站內容的一部份時)
  2. 當這張圖片有特別意義的語義,比如警告圖示,就需使用img標籤及它的alt屬性。向所有的使用者終端實現他的意義。
  3. 如果使用動畫,img動畫要比background-image 表現更好。
  4. 當圖片要有超連結,連結到外部網址時。
  5. 當圖片要有點圖放大的功能時

使用 background-image 使用時機

  1. 如果圖片不是內容的一部分使用 background-image。
  2. 如果使用圖片替換文字請使用 background-image。
  3. 如果不希望別人列印頁面時候包含這張圖片請使用 background-image。
  4. 如果想改善載入時間 使用 CSS sprites (也就是小圖合併大圖的意思,可以把很多張小圖合併到一張大圖裡)。
    例如:原本10張小圖會觸發10次HTTP request,但透過CSS Sprites就可以只觸發1次HTTP request,如此一來,只需要load一張圖,降低網頁載入的時間。
  5. 如果只想用一張圖片的一部分 請使用 CSS sprites。
  6. 希望圖片自適應到某個高度即停止。

基本上在網站新增圖片時還是會先建議用HTML的,除非是要設定一個section的背景圖片再用CSS的background-image。而且新增HTML的後,可以再去CSS設定圖片樣式,像是:border-radius、box-shadow、filter、object-fit、opacity等等,彈性比較大。


background-image 語法

div{
    background-image: url(...);
    height: 300px; (可以控制自適應的高度)
    background-size: auto / cover / contain / % / px ; (用來設定背景圖片的尺寸)
    background-position: center / top / left / bottom / px / % ;
    background-attachment: scroll / fixed / local; (背景圖的固定樣式,在使用者捲動卷軸時呈現不一樣的視覺效果)
    background-repeat: repeat / no-repeat / repeat-x /repeat-y / space / round ;(設定背景圖片是否要重複)
}

上面為比較常用到的屬性,下面來詳細介紹:

基本語法

background-image: url(...);
導入背景圖片,可以使用相對路徑也可以使用絕對路徑

background-size 設定背景圖片的尺寸

auto : 不改變原圖尺寸。
cover : 不改變圖片比例的情況下,用背景圖片把區塊塞滿後裁切。
contain : 不改變圖片比例的情況下,完整呈現圖片。
% : 選擇背景圖片在區塊中要顯示的比例。(會設置寬與高,若只有一個數字則高度為auto)。
px : 直接給定圖片的width和height,如果只輸入一個值,則width和height相同。

background-position 設定背景圖片的位置

可以使用left/right/top/center/bottom/%/px
如果只輸入一個值,則width和height相同。

background-attachment 設定背景圖的固定樣式

不同的設定讓使用者捲動卷軸時呈現不一樣的視覺效果
scroll : (預設)當你設定背景圖的區塊也有卷軸時,在捲動該區塊卷軸時,背景圖會固定位置不變,但當捲動整個網頁的卷軸時,該區塊的背景圖繪跟著網頁卷軸滾動。
fixed : 不管你在捲動設定背景圖區塊內的卷軸,或是整個網頁的卷軸,背景圖都會固定位置不變。
local : 不管捲動哪個卷軸,背景圖都會跟著卷軸移動。

background-repeat 設定背景圖片是否要重複

repeat
no-repeat
repeat-x : 只在x軸重複背景圖片。
repeat-y : 只在y軸重複背景圖片。
space : 背景圖片尺寸不變的情況下,自動調整重複的背景圖片之間的間距。
round : 調整背景圖片的尺寸,讓重複的背景圖片可以剛好塞滿設定背景的區塊。


在製作網頁時,我會先客製化class:

.zoomimage{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
}

當需要用到響應式的背景圖片時,僅需在區塊加上圖片路徑url與想特定設置的高度,再加上class即可。


另外在使用background-image時要特別注意:
想要使用background-image外面一定要有一個container,通常在html上會使用div。
需要特別注意的是外面這層div若沒有設定寬高,背景圖片是不會顯示出來的。


#background-image #背景圖片 #img







Related Posts

[第八週] ajax

[第八週] ajax

[7] 專業品質工程師

[7] 專業品質工程師

JavaScript變數&運算

JavaScript變數&運算


Comments