linux下找出核心符號資訊的4種方法
阿新 • • 發佈：2020-12-29
background 所有屬性
- background-color
- background-image
- background-repeat
- background-position
- background-size
- background-origin
- background-clip
- background-attachment
background-color 設定背景顏色
background-image 設定背景圖片
- 可以同時設定背景圖片和背景顏色，這樣背景顏色將會成為圖片的背景色
- 如果背景的圖片小於元素，則背景圖片會自動在元素中平鋪將元素鋪滿
- 如果背景的圖片大於元素，將會一個部分背景無法完全顯示
- 如果背景圖片和元素一樣大，則會直接正常顯示
background-repeat 用來設定背景的重複方式
可選值：
- repeat 預設值 ， 背景會沿著x軸 y軸雙方向重複
- repeat-x 沿著x軸方向重複
- repeat-y 沿著y軸方向重複
- no-repeat 背景圖片不重複
background-position 用來設定背景圖片的位置
設定方式：
1、通過top left right bottom center幾個表示方位的詞來設定背景圖片的位置
使用方位詞時必須要同時指定兩個值，如果只寫一個則第二個預設就是center
2、通過偏移量來指定背景圖片的位置：
水平方向的偏移量 垂直方向變數
background-position: top right;
background-position: left;
background-clip 設定背景的範圍
可選值：
- border-box 預設值，背景會出現在邊框的下邊
- padding-box 背景不會出現在邊框，只出現在內容區和內邊距
- content-box 背景只會出現在內容區
background-origin 背景圖片的偏移量計算的原點
- padding-box 預設值，background-position 從內邊距處開始計算
- content-box 背景圖片的偏移量從內容區處計算
- border-box 背景圖片的變數從邊框處開始計算
background-size 設定背景圖片的大小
第一個值表示寬度 第二個值表示高度
如果只寫一個，則第二個值預設是 auto
- cover 圖片的比例不變，將元素鋪滿
- contain 圖片比例不變，將圖片在元素中完整顯示
background-attachment 背景圖片是否跟隨元素移動
可選值：
- scroll 預設值 背景圖片會跟隨元素移動
- fixed 背景會固定在頁面中，不會隨元素移動
backgound
背景相關的簡寫屬性，所有背景相關的樣式都可以通過該樣式來設定
並且該樣式沒有順序要求，也沒有哪個屬性是必須寫的
注意：
- background-size 必須寫在 background-position 的後邊，並且使用 / 隔開
- background-origin background-clip 兩個樣式 ，orgin 要在 clip 的前邊，這個就不用 / 隔開
background: url('./img/2.jpg') #bfa center center/contain border-box content-box no-repeat;
雪碧圖
雪碧圖的使用步驟：
- 先確定要使用的圖示
- 測量圖示的大小
- 根據測量結果建立一個元素
- 將雪碧圖設定為元素的背景圖片
- 設定一個偏移量以顯示正確的圖片
雪碧圖的特點：
一次性將多個圖片載入進頁面，降低請求的次數，加快訪問速度，提升使用者的體驗
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雪碧圖</title>
<style>
a:link {
display: block;
width: 26px;
height: 26px;
background-image: url('https://gitee.com/Liwker/picture/raw/master/img/20201229143616.png');
background-position: -7px -287px;
}
a:hover {
background-position: -67px -287px;
}
a:active {
background-position: -97px -287px;
}
</style>
</head>
<body>
<a href="javascript:void(0)"></a>
</body>