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

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),寧陵企業(yè)網(wǎng)站建設(shè),寧陵品牌網(wǎng)站建設(shè),網(wǎng)站定制,寧陵網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,寧陵網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

####背景顏色
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;

顏色可以設(shè)置成十六進(jìn)制 或者 rgb 或者 rgba
1.5.2. 背景圖片

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

1.5.3. 背景平鋪

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

background-attachment: 背景是否滾動;

1.scroll  默認(rèn)值 圖片跟隨盒子一起滾動2.fixed      圖片不跟隨盒子一起滾動

1.5.5. 背景位置

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

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

感謝各位的閱讀，以上就是“CSS背景的相關(guān)操作介紹”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS背景的相關(guān)操作介紹這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！