Day2 | img 圖片與背景圖使用方式、視差滾動背景效果

發表於 分類於
關於圖片使用方式與視差滾動背景效果

❒ 圖片使用背景圖方式

▷ 屬性 background-repeat

  • 為了確保背景圖正確顯示，需搭配 background-repeat:no-repeat; 告訴瀏覽器背景圖片不要重覆顯示。

▷ 屬性 background-position

  • background-position: 水平方向 垂直方向;
    • 水平方向：方向方式 ( left、center、right )、百分比方式。
    • 垂直方向：方向方式 ( top、center、bottom )、百分比方式。
  • 注意：如果 background-position 使用了簡化寫法，只寫一個屬性值，另一個屬性值將會自動取中間值，為了將來管理方便，建議兩個方向的屬性值都寫上去比較好。
1
2
3
4
background-position:right bottom;　// 靠右靠下對齊
background-position:30px 60px;　//靠左 30px 靠上 60 px 的位置
background-position:10% 50%;　// 靠左 10% 靠上 50% 的位置
background-position:10%;　// 效果同上一行，靠左 10% 靠上 50% 的位置

▷ 屬性 background-size

CodePen 範例

  • contain：如果背景圖有設定寬高，會自適應在設定的寬高內，但當背景圖尺寸小於設定的寬高時，不會填滿設定的寬高。
  • cover：背景圖會依設定個寬度做縮放並填滿。
    • 因為使用 backgrounf-size: cover 時，可能會裁切到原圖片，可搭配 background-position 調整圖片位置。

▷ 屬性 background-attachment

屬性主要是設定背景圖片位置在設定的區塊內捲動時會個著捲動或固定，可使用 fixed 做出視差滾動的效果。
屬性值

  • scroll 預設，在區塊內卷軸捲動時，背景會跟著移動。CodePen 範例
    • 需注意，如果子區塊也使用 scroll ，子區塊的卷軸捲動時背景圖會固定不動，不會跟著被捲走。CodePen 範例
  • fixed 在區塊內卷軸捲動時，背景會固定不動。 CodePen 範例
    • 注意：如果子區塊也使用 fixed ，子區塊的卷軸捲動時背景圖不個著被捲走，會固定。但父區塊捲動卷軸時，子區塊的背景會個著動。 CodePen 範例
  • local 類似 scroll ，在區塊內滾動卷軸時背景圖會跟著動。CodePen 範例

❒ 使用 background-attachment:fixed 做出視差滾動

1
2
3
4
/* 架構 */
background-image: url("圖片路徑");
background-repeat: no-repeat;
background-attachment: fixed;

// 視差滾動示意圖
CodePen 範例

❒ 圖片使用 img 標籤方式

▷ 圖片寬度設定中 max-width 與 width 差異

CodePen 範例

max-width:100%; ( 建議使用此方式 )

  • 會跟隨父層做自適應縮放，但會保有圖片原始寬度。如果父層寬度超出圖片寬度，則圖片會停止延伸。

width:100%;

  • 隨父層做自適應縮放，父層大於圖片原始尺寸，圖片會跟著變大。
  • 缺點 : 如果圖片解析度不夠會糊掉。

// 圖片寬度設定中 max-width 與 width 差異

▷ 響應式圖片 Reset

1
2
3
4
5
/* img reset */
img {
 max-width:100%;
 height: auto;
}
  • 理解上方 max-width 與 width 差異後可以把上方 img reset 設定方式加入 CSS Reset 中，就不需要重覆設定也可避免因圖片解析度太高出現 x 軸或破版問題囉！

▷ 屬性 object-fit

CodePen 範例

  • fill：預設值，圖片在填滿容器時可能會產生變形。
  • contain : 會保持圖片原本比例，呈現在容器中，但與容器尺寸不依時不會填滿整個容器。
  • cover : 保持圖片比例，填滿容器，但與容器尺寸不依時會裁切到圖片以填滿整個容器。
    • 因為使用 object-fit: cover 時，可能會裁切到原圖片，如果想要移動可視範圍位置，可搭配 object-position，效果就類似於 background-position。
    • 關於 object-position 用法可參考「 CSS object-position 属性 ****」。
  • none : 不調整圖片比例。
  • scale-down : 等比縮小，與 none 或 contain 中的一個相同，取決於它們兩個之間誰得到的對象尺寸更小。

參考資訊