07.背景樣式

07.背景樣式

1.什麼是背景樣式

背景樣式：是W3C規定一個瀏覽器如何渲染元素的背景層，用戶可以在背景層上增加顏色， 圖片等效果

2.背景單例樣式

**背景顏色（background-color）**默認顏色爲transparent，可以近似理解爲透明）

3種寫法：

rgb: 字符含義 r→red（紅） g→green（綠） b: blue（藍）
取值範圍:rgb(0,0,0)→rgb(255,255,255)
rgba：rgba較之rgb多了一個alpha通道用來設置背景透明度，a的取值範圍爲0~1，（opacity設置整個元素的透明度，背景色rgba設置背景層的透明度）
十六進制： #000000~#ffffff(大小寫都可,但是要統一)，#aabbcc簡寫: #abc

另外，背景顏色是可以延伸到border邊框下的。

背景圖片（background-imag）

background-image：url(“圖片地址”);

常用背景圖片格式：
.jpg 不支持動畫，不支持透明，漸進顯示，顏色豐富，有損
.png 不支持動畫，支持透明度，顏色更豐富，無損
.gif 支持動畫，256種顏色，2種透明度，漸進顯示
.webp 支持動畫，高壓縮率，高加載速率

背景平鋪（background-repeat）

寫法：background-repeat: repeat-x;
background-repeat: repeat-y

如果不需要背景圖片重複顯示：
樣式值可設置爲no-repeat;

備註：如果採取默認的背景圖片平鋪，則背景圖片則會延伸到邊框之下，如果不重複，則圖片不會延伸至邊框之下

背景大小（background-size）

背景圖片縮放：background-size: width height；

數字類樣式值：
百分比：百分比的計算基數爲元素的width和height;
像素：直接數值;
(數值可以寫一個或兩個,如果只有一個第二個就是默認auto)

關鍵字類樣式值：
cover：圖片等比縮放直到剛好覆蓋背景區域
contain：圖片等比縮放,直到有一條邊觸碰到邊框就停止。

背景圖片縮放: background-size:400px auto;
background-size:100% auto;
auto的意思爲:按照此時的圖片寬度，等比例拉大圖片的高度

背景圖片顯示基點（background-origin）

背景圖片顯示基點樣式background-origin：規定了在圖片不平鋪的情況下，背景圖片的左上角頂點的初始位置
content-box: 背景圖片內容區左上角開始
padding-box: 背景圖片從內邊距左上角開始
border-box: 背景圖片相當於邊框左上角開始

背景圖片裁剪區域（background-clip）

背景圖片從開始裁切: background-clip
content-box: 只顯示內容區部分的背景圖片
padding-box:顯示內容區和內邊距部分的背景圖片
border-box: 顯示內容區、內邊距和邊框部分的圖片

當背景圖片的源文件大小遠大於元素時，那麼即便不設置背景圖片大小和背景平鋪的時候也能夠佔滿元素的所有區域，並且此時還會有部分圖片內容超出元素的邊緣

背景圖片裁剪區域（background-clip）樣式的作用就是，在背景圖原始尺寸大於元素的時候講圖片進行裁剪，保證背景圖片在哪個區域可見

背景圖片關聯依附（ background-attachment ）

fixed：
此關鍵字表示背景相對於視口固定。即使一個元素擁有滾動機制，背景也不會隨着元素的內容滾動。

local：
此關鍵字表示背景相對於元素的內容固定。如果一個元素擁有滾動機制，背景將會隨着元素的內容滾動， 並且背景的繪製區域和定位區域是相對於可滾動的區域而不是包含他們的邊框。

scroll：
此關鍵字表示背景相對於元素本身固定， 而不是隨着它的內容滾動（對元素邊框是有效的）。

overflow樣式

overflow樣式的作用就是，一個元素的內容太大而超出元素邊緣時，瀏覽器對超出部分的內容如何處理

overflow：visible;（默認）
超出內容正常顯示

overflow：hidden;
超出內容隱藏

overflow：scroll;
如果內容比較多，則用滾動條的形式展示多餘內容

overflow：auto;
內容未超出，正常顯示
內容超出，顯示滾動條

複合寫法

background: no-repeat url(https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1208538952,1443328523&fm=26&gp=0.jpg) scroll 20px 20px/50px 50px, url(https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg) no-repeat scroll 100px 100px/50px 50px, red;
注意顏色在最後面	}

--------------------------------- | ---- |
| 注意顏色在最後面 | } |