CSS背景：顏色、圖片、平鋪、背景圖片位置、背景圖像
時間：2023-09-01 14:18:01 | 來源：網站運營
時間：2023-09-01 14:18:01 來源：網站運營
CSS背景：顏色、圖片、平鋪、背景圖片位置、背景圖像：前端學習筆記教程不定期更新中，傳送門：
- 前端HTML第一天：什么是網頁？什么是HTML？網頁怎么形成？
- HTML標簽大全
- 前端學習：表格學習，附練習+源碼
- 前端學習之列表，附送全套源碼
- CSS入門最全筆記
- CSS樣式表
- CSS之emmet語法
- CSS的復合選擇器
- CSS的顯示模式
今天繼續(xù)學習CSS背景相關全部內容：
通過 CSS 背景屬性，可以給頁面元素添加背景樣式。
背景屬性可以設置背景顏色、背景圖片、背景平鋪、背景圖片位置、背景圖像固定等。
1、背景顏色
background-color 定義元素的背景顏色
使用方式：
其他說明：
元素背景顏色默認值是transparent（透明）
2、背景顏色
樣式名稱
? background-image 定義元素的背景圖片使用方式：
其他說明：實際開發(fā)常見于 logo 或者一些裝飾性的小圖片或者是超大的背景圖片, 優(yōu)點是非常便于控制位置. (精靈圖也是一種運用場景)
注意：背景圖片后面的地址，千萬不要忘記加 URL， 同時里面的路徑
**不要加引號**。
3、背景平鋪
樣式名稱
background-repeat 設置元素背景圖像的平鋪 使用方式：
4、背景圖片位置
樣式名稱：
background-position 屬性可以改變圖片在背景中的位置使用方式
參數(shù)代表的意思是：x 坐標和 y 坐標。 可以使用 方位名詞 或者 精確單位
其他說明：1、參數(shù)是方位名詞? 如果指定的兩個值都是方位名詞，則兩個值前后順序無關，比如 left top 和 top left 效果一致
如果只指定了一個方位名詞，另一個值省略，則第二個值默認居中對齊
2、參數(shù)是精確單位? 如果參數(shù)值是精確坐標，那么第一個肯定是 x 坐標，第二個一定是 y 坐標
? 如果只指定一個數(shù)值，那該數(shù)值一定是 x 坐標，另一個默認垂直居中
3、參數(shù)是混合單位? 如果指定的兩個值是精確單位和方位名詞混合使用，則第一個值是 x 坐標，第二個值是 y 坐標
5、背景圖片固定
樣式名稱
background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其余部分滾動。使用方式：
其他說明：background-attachment 后期可以制作視差滾動的效果。
6、背景樣式合寫
樣式：
background: 背景顏色 背景圖片地址 背景平鋪 背景圖像滾動 背景圖片位置;使用方式：
7、背景色半透明
CSS3 提供了背景顏色半透明的效果。
使用方式
- 最后一個參數(shù)是 alpha 透明度，取值范圍在 0~1之間
- 我們習慣把 0.3 的 0 省略掉，寫為 background: rgba(0, 0, 0, .3);
注意：
- 背景半透明是指盒子背景半透明，盒子里面的內容不受影響
- CSS3 新增屬性，是 IE9+ 版本瀏覽器才支持的，但是現(xiàn)在實際開發(fā),我們不太關注兼容性寫法了,可以放心使用
8、背景總結
在線咨詢
