CSS背景的相關操作介紹

這篇文章主要講解了“CSS背景的相關操作介紹”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS背景的相關操作介紹”吧！

####背景顏色
background-color

background-color: red;background-color: rgb(88,88,88);

####背景圖片

background-image: url("show.jpeg");

####背景平鋪
圖片不平鋪

background-repeat: no-repeat;

####背景是否滾動
可選值 scroll fixed

background-attachment: fixed;

背景顏色
background-color: red;

顏色可以設置成十六進制 或者 rgb 或者 rgba
1.5.2. 背景圖片

background-image: url(圖片路徑);

1.5.3. 背景平鋪

background-repeat: 背景平鋪;1.repeat 平鋪  默認的2.no-repeat 不平鋪3.repeat-x 水平平鋪4.repeat-y 垂直平鋪1.5.4. 背景是否滾動

background-attachment: 背景是否滾動;

1.scroll  默認值 圖片跟隨盒子一起滾動2.fixed      圖片不跟隨盒子一起滾動

1.5.5. 背景位置

1.方位名詞 right top left center bottom 書寫的順序不論
2.像素 如果是像素 那么默認在以“當前盒子”的左上角為0 0原點 構建一個坐標系 第一值是X軸的位置 第二個值是Y軸的位置 交互的點就是圖片開始顯示的起始位置
多說一嘴：
1、程序里面的坐標系X軸水平向右  Y軸垂直向下
2、注意順序
3.百分比  百分比參照的自身盒子的寬高： 最終的位置是當前盒子自身的寬高的百分比 - 圖片自身的寬高的百分比
4.還可以混寫 混寫是需要考慮順序
####背景的簡寫
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置;

####img和背景圖片的區別：
img不需要專門寫寬高就能夠顯示在頁面上
而背景圖片默認是撐不開容器的 需要專門寫寬高
一般產品插入圖都推薦使用img  而一些小的icon 或者很少更新的圖片 再或者超大的圖片推薦使用背景圖
而且背景圖可以讓內部的文字蓋在上面，但是img不行（除非后期用定位）

感謝各位的閱讀，以上就是“CSS背景的相關操作介紹”的內容了，經過本文的學習后，相信大家對CSS背景的相關操作介紹這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！