css 背景（background）
阿新 • • 發佈：2020-07-01
關於背景我們可以指定的樣式有：背景顏色，背景圖片，背景平鋪，背景位置，背景附著。
背景顏色（color）
語法：
background-color: 顏色值 預設值是transparent，表示無背景。
顏色值：預定義的顏色值/十六進位制/RGB程式碼
例如黑色背景：
background-color: black 或者 background-color: #000000; 或者 background-color: rgb(0,0,0);
這裡補充一個知識點：背景透明（css3）
- 語法：
background: rgba(0, 0, 0, 0.3);
- 最後一個引數是alpha 透明度 取值範圍 0~1之間。1 表示最強，不透明，0 表示最弱，透明。
- 我們習慣把0.3 的 0 省略掉 這樣寫 background: rgba(0, 0, 0, .3);
利用背景透明我們可以做出如下效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1 { width: 200px; height: 200px; position: absolute; } .div1:hover { background-color: rgba(0,0,0,.3); } </style> </head> <body> <div class="div1"></div> <div class="div2"> <img src="pikachu.jpg" alt="" width="200" height="200"> </div> </body> </html>
背景圖片（image）
- 語法：
background-image : none | url (url)
| 引數 | 作用 |
|---|---|
| none | 無背景圖（預設的） |
| url | 使用絕對或相對地址指定背景影象 |
background-image : url(images/demo.png);
- 小技巧： 我們提倡 背景圖片後面的地址，url不要加引號。
背景平鋪（repeat）
平鋪就是一張圖片鋪滿整個版面。例如下面這張皮卡丘圖片，他的寬和高都遠遠小於版面的寬和高，所以會沿著水平和垂直的方向進行平鋪，直到鋪滿整個版面。
在css中，我們可以控制圖片的平鋪行為。
- 語法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y
| 引數 | 作用 |
|---|---|
| repeat | 背景影象在縱向和橫向上平鋪（預設的） |
| no-repeat | 背景影象不平鋪 |
| repeat-x | 背景影象在橫向上平鋪 |
| repeat-y | 背景影象在縱向平鋪 |
最常用的就是no-repeat了吧。如果我們設定了background-repeat : no-repeat 。那麼無論版面（容器）多大，都只會渲染一張圖片。