放圖片有兩種方式
- HTML
<img>這個 tag - CSS 的
background-image
當圖片要有超連結，或是有點圖放大的功能時，建議先用 HTML的 <img>
HTML <img>
使用 <img> 放圖片的檔案路徑或 URL 用 src
<img src="png/1.png">
<img src="https://tzu/photo/1">
透過 object-fit 、 object-position 這兩個屬性，可以控制置換元素的內容填入的位置及大小
object-fit
| Value | Description |
|---|---|
| fill | 預設值，預設會強制變形至 css 所定義的元素寬高，不管原檔比例 |
| contain | 增加或減少載入物件的寬度及高度(維持原比例)直到放得進所定義的元素寬高 |
| cover | 填滿元素的寬度及高度(維持原比例)，通常會剪掉部分的物件 |
| none | 不做任何大小及比例調整 |
| scale-down | 將會選擇設為 none 或 container 兩者間較小的那個物件 |
object-position
object-position: 50% 50%;
object-position: right top;
object-position: 250px 125px;
透過這兩個屬性，我們可以控制置換元素的內容填入的位置及大小。
注 : IE、edge 並不支援這兩個屬性
CSS 的 background-image
使用 CSS 的 background-image 放圖片的檔案路徑或 URL 用 url
.photo{
background-image: url('png/1.png');
}
background-attachment
設定背景圖片的位置是否要固定在 viewport（視圖）上，還是背景圖片會隨著它的 containing block（外層容器）一起滾動。
- scroll : 預設值，捲動網頁，背景圖跟著滾動，捲動放背景圖的外層容器，背景圖不動
- fixed : 全都固定住，背景圖在滾動網頁或外層容器時，都不會跟著移動
- local : 全都一起移動，背景圖在滾動網頁或外層容器時，都會跟著移動
background-origin
決定背景圖片的起始位置
當使用 background-attachment 為 fixed 時，該屬性將忽略不起作用
- border-box : 背景圖片的擺放以 border 區域為參考
- padding-box : 背景圖片的擺放以 padding 區域為參考
- content-box : 背景圖片的擺放以內容區域為參考
background-position
- top
- left
- center
- 5% 75%;
- bottom 50px right 100px;
也可以設定多張圖片的位置.photo { background-image:url("png/1.png"),url("png/1.png"); background-position: 0px 0px, right 3em bottom 2em; }
background-repeat
定義背景圖像的重複方式
| Value | Description |
|---|---|
| repeat | default，垂直和水平重複背景圖像，圖片會被裁切 |
| repeat-x | 圖片僅水平重複 |
| repeat-y | 圖片僅垂直重複 |
| no-repeat | 不重複。圖片只會顯示一次 |
| space | 和 repeat 一樣都是垂直和水平重複，差別在於第一個和最後一個圖像固定在元素的任一側，並且空隙在圖像之間均勻分佈 |
| round | 重複並壓縮或拉伸背景圖像以填充空間（無間隙） |
可以使用雙 value 語法 ，例如 background-repeat: space repeat;
background-size
設定背景圖片的尺寸
| Value | Description |
|---|---|
| auto | 預設樣式，不改變原圖尺寸。 |
| contain | 在其容器內縮放圖片，(不裁剪或拉伸圖像)。如果容器大於圖像，除非設定 background-repeat: no-repeat;，否則圖片會重複且裁切。 |
| cover | 盡可能縮放圖像來填充容器，圖片比例不會變，但會裁剪圖像使容器沒有空白空間。 |
| 50% | 背景圖片的寬度為容器的 50% ，height 的值沒有給，則預設為 auto |
| length | 給圖片的 width 和 height，如果只輸入一個值，則 width 和 height 相同 |
alt
當圖片來源損壞無法顯示時， 網頁會顯示該替代文字，使用替代文字也可以增加 SEO 的排名
background-blend-mode
濾鏡效果，除了固定的預設值，也可以使用兩張圖片來混合
.item {
width: 300px;
height: 300px;
background: url('image1.png'),url('image2.png');
background-blend-mode: screen;
}
