發表於 | 分類於

背景圖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 圖片滿版 */
.img-cover {
  background-image: url(./bg.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 圖片居中 */
.img-contain {
  background-image: url(./bg.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

其他背景圖範例：固定、滿版、置中
background-attachment 是背景固定模式的屬性
註：作為背景的圖片是撑不起元素的，需要額外給 div 新增「寬、高」

閱讀全文 »