★文章內容學習來源：拉勾教育大前端就業集訓營
| 目錄 | 上篇 | 本篇 |
|---|---|---|
| 一、背景顏色 background-color | 五、背景附著 background-attachment | |
| 二、背景圖片 background-image | 六、綜合寫法 | |
| 三、背景重復 background-repeat | 七、背景應用 | |
| 四、背景定位 background-position | 八、CSS3 新增背景屬性 |
五、背景附著 background-attachment
| 背景附著屬性 | 具體含義 |
|---|---|
| 屬性名 | background-attachment |
| 作用 | 設定的是背景圖片是否要隨著頁面或者盒子的滾動而滾動 |
| 屬性值 | scroll 滾動的，表示背景圖片與盒子保持相對位置不變，隨著頁面的滾動而滾走 |
| fixed 固定的，背景圖的定位的參考點從盒子 border 以內的左上頂點變為了瀏覽器視窗的左上頂點，頁面滾動時，瀏覽器視窗的左上頂點是不變的，導致背景圖固定在瀏覽器視窗的某個位置，不會隨著頁面滾動而滾走， |
background-attachment: scroll;
background-attachment: fixed;
六、綜合寫法 background
| 綜合寫法 | 具體含義 |
|---|---|
| 屬性名 | background background |
| 屬性可以將五個單一屬性的值進行合寫 | |
| 屬性值 | 可以有 1-5 個屬性值，值之間用空格進行分隔，背景定位的兩個屬性值算作一個屬性值，不能被分開也不能顛倒順序，五個屬性值之間可以互換位置， |
| 注意事項 | ①如果屬性值沒有設定完全，其他沒有設定的單一屬性會按照默認值加載 |
| ②如果想去層疊綜合屬性中的一部分，其他的屬性保持不變，最好使用單一屬性寫法進行層疊 |
background: url(samoye.jpg) no-repeat left top fixed pink;
background-color: blue;/*其他的屬性保持不變，最好使用單一屬性寫法進行層疊*/
完整效果及代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>六、綜合寫法</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
width: 500px;
height: 500px;
padding: 30px;
border: 10px dashed #f00;
margin: 50px;
background: url(samoye.jpg) no-repeat left top fixed pink;
background-color: blue;/*其他的屬性保持不變，最好使用單一屬性寫法進行層疊*/
}
</style>
</head>
<body>
<div class="box">111</div>
</body>
</html>
七、背景應用
幾個比較常見的場景：
場景一： 背景圖替換插入圖
替換插入圖
<h1>標簽是權重最高的標簽，一般會在內部書寫最重要的內容，比如 logo 圖片、最大 的標題等， 另外<h1>內部的文字，可以幫助提高 SEO 搜索排名， 但是在設定的是 logo 圖片時，如果使用插入圖，就不能書寫搜索關鍵字， 如下示例：
<h1>
<a href="#"><img src="taobaocom.jpg"></a>
</h1>
所以如果想解決 SEO 問題，可以將 HTML 結構中，插入圖換成搜索關鍵字，然后使用
css添加背景圖給<a>標簽或<h1>標簽，如下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 場景一： 背景圖替換插入圖</title>
<style>
*{
margin: 0;
padding: 0;
}
.header h1 a {
display: block;
width: 148px;
height: 58px;
background: url(taobaocom.jpg) no-repeat; /*插入背景圖*/
}
</style>
</head>
<body>
<div class="header">
<h1>
<a href="#">淘寶網|購物|六一</a>
</h1>
</div>
</body>
</html>
補充：文字隱藏方法
①將字號設定為 0，IE8 及以上或高版本瀏覽器可以隱藏文字，但是 IE7 及以下有兼容問題，
②可以設定給<a>標簽一個text-indent屬性，屬性值為負的很大的值，文字會走到盒子外部，直接再設定溢位隱藏屬性overflow: hidden;，將溢位文字隱藏，
.header h1 a {
font-size: 0;
}
.header h1 a {
text-indent: -30em;
overflow: hidden;
}
場景二：padding區域背景圖
制作方法：在一個盒子中有背景圖部分，而且有文字內容，文字會讓開背景圖區域進行加載， 背景區域應該使用 padding 擠出位置， 四個方向的 padding 都可能用于添加背景圖， 例如 padding-left 區域背景：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>場景二：padding區域背景圖</title>
<style>
*{
margin: 0;
padding: 0;
}
.list {
width: 300px;
padding-left: 10px;
border: 1px solid #333;
margin: 10px;
list-style: none;
font: 16px/32px "微軟雅黑";
}
.list li {
padding-left: 20px;
background: url(star.png) no-repeat left center;
background-size: 10px 10px;
}
</style>
</head>
<body>
<ul class="list">
<li>新聞標題新聞標題新聞標題</li>
<li>新聞標題新聞標題新聞</li>
<li>新聞標題新聞標題新聞標</li>
<li>新聞標題新聞標題</li>
<li>新聞標題新聞標題新聞標題</li>
</ul>
</body>
</html>
場景三：精靈圖技術
當用戶訪問一個網站時，需要向服務器發送請求，網頁上的每張影像都要經過一次 請求才能展現給用戶， 然而，一個網頁中往往會應用很多小的背景影像作為修飾，當網頁中的影像過多時， 服務器就會頻繁地接受和發送請求，這將大大降低頁面的加載速度， 為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度，出現了
CSS 精靈技術（也稱CSS Sprites、CSS 雪碧），
CSS 精靈是一種處理網頁背景影像的方式，
它將一個頁面涉及到的所有零星背景影像都集中到一張大圖中去，然后將大圖應用于網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景影像即可全部展示出來， 通常情況下，這個由很多小的背景影像合成的大圖被稱為精靈圖，
css 精靈的技術依據
①將網頁中需要用到的小尺寸背景圖制作成一張背景透明的 png 圖片，
②利用背景定位技術，將精靈圖的每個小圖片加載到對應的標簽上，
制作精靈圖的注意事項
- 精靈圖上放的都是小的裝飾性質的背景圖片，插入圖片不能往上放，
- 精靈圖的寬度取決于最寬的那個背景圖片的標簽寬度，
- 精靈圖可以橫向擺放也可以縱向擺放，但是每個圖片之間必須留夠足夠的空白， 保證背景圖片加載到一個標簽內部時，不能出現多余內容，
- 在精靈圖的最底端，盡量留一點空白，方便以后添加其他精靈圖，
可以使用一些在線工具，快速生成精靈圖，
八、CSS3 新增背景屬性
1.背景半透明
- CSS3 支持背景半透明的寫法，顏色值增加了一種
rgba模式， - rgba 模式：在 rgb 基礎上增加了一個不透明度的設定，不透明度 alpha 取值范圍在 0-1 之間，0 表示完全透明，1 表示完全不透明，0.5 表示半透明，
- 書寫方式：rgba(紅色，綠色，藍色，不透明度)
- 注意： 背景半透明是指盒子背景半透明， 盒子里面的內容不受影響，
- 半透明其他應用同樣， 可以給文字和邊框透明，都是 rgba 的格式來寫，
background-color: rgba(0, 0, 255, 0.5) /*半透明色背景*/
color:rgba(0, 255, 255, 0.5)/*半透明色文字*/
border: 1px solid rgba(255,0,0,0.5);/*半透明色邊框*/
2.背景縮放 background-size
- 通過 background-size 設定背景圖片的尺寸，就像我們設定
<img>的尺寸一樣，在 移動 Web 開發中做螢屏適配應用非常廣泛，
| 背景縮放屬性 | 具體含義 |
|---|---|
| 屬性值 | |
| ① px 值 （1-2個像素值） | 只設定1個值，垂直方向等比例拉伸； |
| 設定2個值，按照設定值加載， | |
| ②百分比 | 同像素值設定方法相同，設定百分比時，數值參照盒子的寬、高屬性 |
| ③cover | 自動調整縮放比例，把背景影像擴展至足夠大，以使背景影像完全覆寫背景區域，如有溢位部分則會被隱藏， |
| ④contain | 自動調整縮放比例，把影像影像擴展至最大尺寸，保證圖片始終完整顯示在背景區域， |
3.多背景
- CSS3 中規定，一個盒子上，可以添加多個背景圖片，
- background-image 的屬性值書寫時，以逗號分隔多背景的 URL路徑地址，
- 注意：背景加載時，先寫的背景壓蓋后寫的背景圖片，
background-image: url(samoye.jpg),url(heben.jpg);
下篇繼續：【32】CSS核心樣式（9）——定位屬性（上）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/273733.html
標籤：其他
上一篇：flex布局