background語法整理,背景圖片位置、重複、尺寸,
及業界常用的logo圖設定。
★ background 在 html 元素上載入背景圖片，設定寬高
通常會用來設定背景圖片，用法如下：
★ background-repeat：背景圖片重複顯示
- background-repeat: repeat; (defult)
背景圖片重複顯示 - background-repeat: no-repeat;
不重複、只呈現一張圖片 - background-repeat: repeat-x;
圖片只重複一條：X軸(左右)重複 - background-repeat: repeat-y;
圖片只重複一條：Y軸(上下)重複
★ background-position：移動背景圖片的位置
- background-position: top left; 靠左上角 (defult)
background-position: 靠上 靠左;
background-position: 位置設定 位置設定;
可兩個不會牴觸的位置一起用
top靠上、right靠右、bottom靠底、left靠左、center置中
可設定靠哪邊：也能單用
如: background-position: center; 置中 - background-position: 25% 75%;
background-position: X軸 Y軸; 如座標設定,可用%也可用px等單位
- background-position: bottom 50px right 100px;
如 padding: background-position: 底部推50px 右推100px;
★ background-size： 背景圖片尺寸
- background-size: contain;
圖片高度自適應容器高度
如有設定容器寬度,圖片寬度達不到容器寬度就重複顯示 - background-size: cover;
自適應容器 - background-size: 30%;
原本圖片幾% - background-size: 200px 100px;
直接設定圖片寬高
★ background 縮寫：屬性之間中間空白 順序可不同
此內容縮寫：
* {
background: url(“xxx")green no-repeat right top;
background-size: 100px;
}＊background-size: 要另外寫
★ 一般常用背景圖片的設定：
.image{
height:380px; 【設定高度】
background-image:url(“https://背景圖片網址.png");【背景圖連結】
background-position: center;【圖片置中,適合圖片中間為重點的圖】
background-size: cover;【自適應容器】
background-repeat: no-repeat;【不重複】
}★ 一般logo圖的設定：圖片取代文字技巧
因為要優化SEO，LOGO圖會設定在h1裡面、且需有文字好搜尋找到
.header h1 a{
display: block;【a原本是行內元素，要改成區塊元素】
background-image: url(https://google的logo圖片網址.png);
height: 30px;【通常logo寬高常寫死】
width: 92px;
background-size: cover; 【原圖比容器大了話設定：自適應容器】★text-indent: 101%;【第一個字向內縮排】
★overflow: hidden;【自動隱藏超出的文字或圖片】
★white-space: nowrap;【文字不換行】
★【這三段用於文字隱藏】
}
