CSS背景及應用內容總覽：
- 背景圖片（image）
- 背景平鋪（repeat）
- 背景位置（position）
- 背景附着
- 背景簡寫
- 背景透明（CSS3）
- 背景縮放（CSS3）
- 多背景（CSS3）
- 凹凸文字
背景圖片（image）
- background-image：默認值爲none，表示背景上沒有放任何圖像；若要放置圖片，需要設置URL屬性，格式如下：
background-image: url(圖片路徑);
示例1
<head> <meta charset="UTF-8"> <title>Document</title> <style> div { background-image: url(../../../assets/yangzi.jpeg); } </style> </head>
- 注意：background-image 不能繼承。事實上，所有背景屬性都不能繼承。
背景平鋪（重複）（repeat）
- 在頁面中對背景圖片進行平鋪，即對同一張圖片進行重複放置使類似與div的盒子（有一定寬高的）內部的位置被填滿。
- repeat-x ：在水平方向上重複平鋪圖片
- repeat-y ：在垂直方向上重複平鋪圖片
- no-repeat ：則不允許圖像在任何方向上平鋪
示例2
<head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 1000px; height: 600px; background-color: violet; background-image: url(../../../assets/yangzi.jpeg); background-repeat: repeat-x; } </style> </head>
頁面效果如下：
背景位置（position）
- background-position：left top；背景圖片默認是在坐上角，如上面示例2所示；
- 用來更改背景圖片的位置；屬性值有 top | center | bottom | left | right；
- 如果background-position中的值只寫一個，另外一個值默認爲center；兩個值的位置交換後效果一樣；即background-position：left top；和 background-position：top left；效果相同
背景附着
- background-attachment：設置或檢索背景圖片是隨對象內容滾動還是固定的。
- scroll：背景圖片是隨對象內容滾動
- fixed：背景圖片固定不動
背景簡寫
- background：屬性值的順序官方並沒有強制標準。爲了可讀性，建議大家寫成下面的格式；
- background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置;
背景透明（CSS3）
- CSS3支持背景半透明的寫法，與顏色color的半透明寫法相同；格式如下:
background：rgba(r,g,b,a) <!-- a 爲alpha 透明的意思，取值爲 0~1之間； -->
- 注意：背景背景半透明並不影響盒子裏面的內容；
背景縮放（CSS3）
- background-size：設置背景圖片的尺寸。參數如下
- 可以設置長度單位（px）或百分比（設置百分比時，參照盒子的寬高）；
- 設置爲cover時，會自動調整縮放比例，保證圖片始終完整顯示在背景區域，如有溢出部分則會被隱藏；
- 設置爲contain時，會自動調整縮放比例，保證圖片始終完整顯示在背景區域，但可能會有一部分裸漏區域；
background-size: 寬度 高度;
- 注意：儘量只改一個值，另一個值會等比例縮放。
多背景（CSS3）
- 以 逗號 （,）分隔開，可以設置多背景，可用於自適應佈局。格式如下
background-image: url(圖片1地址), 圖片2地址, 、、、;
或
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置,
背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置,
、、、;
凹凸文字
- 利用陰影屬性text-shadow實現；可以在text-shadow中添加多個值。格式如下：
text-shadow: 水平位置 垂直位置 模糊距離 陰影顏色，
水平位置 垂直位置 模糊距離 陰影顏色，
、、、；
文本的裝飾
text-decoration：通常我們用於給鏈接修改裝飾效果
- 使用技巧：在一行內的盒子內，我們設定行高等於盒子的高度，就可以使文字垂直居中。
總示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 1000px; height: 600px; /* background-color：背景顏色 */ /* background-color: violet; */ /* background-image：背景圖片 */ /* background-image: url(../../../assets/yangzi.jpeg); */ /* background-repeat：背景平鋪（重複） */ /* background-repeat: no-repeat; */ /* background-position：背景位置 */ /* background-position: right bottom; */ /* background-attachment：背景附着 */ /* background-attachment: scroll; */ /* background：背景簡寫 等價於以上五句*/ background: hotpink url(../../../assets/yangzi.jpeg) no-repeat fixed left top; /* background-size：圖片縮放 */ background-size: 800px; } /* 背景透明 */ .rgba { width: 1000px; height: 100px; background: rgba(0, 0, 0, 0.3); } /* 凹凸文字：text-shadow: 水平位置 垂直位置 模糊距離 陰影顏色*/ .text-shadow{ width: 1200px; height: 200px; background-color:#ccc; } span.tu{ font: 700 100px "微軟雅黑"; color:#ccc; text-shadow: 3px 3px 3px #000,-5px -5px 3px #fff; } span.ao{ font: 700 80px "微軟雅黑"; color:#ccc; text-shadow: -5px -5px 3px #000,3px 3px 3px #fff; } </style> </head> <body> <div> <div class="rgba"></div> </div> <br/><br/> <div class="text-shadow"> <span class="tu">我是凸起文字 </span> <span class="ao">我是凹下文字</span> </div> </body> </html>
頁面效果如下：
