新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
css中的背景圖片如何變小
這篇文章主要介紹“css中的背景圖片如何變小”,在日常操作中,相信很多人在css中的背景圖片如何變小問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對(duì)大家解答”css中的背景圖片如何變小”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
目前成都創(chuàng)新互聯(lián)公司已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、成都網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計(jì)、余杭網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中,可以利用background-size屬性來讓背景圖片變小。
background-size屬性用于指定背景圖片大小。語法格式如下:
background-size: length|percentage|cover|contain;
值 | 描述 |
---|---|
length | 設(shè)置背景圖片高度和寬度。第一個(gè)值設(shè)置寬度,第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值,第二個(gè)是設(shè)置為 auto(自動(dòng)) |
percentage | 將計(jì)算相對(duì)于背景定位區(qū)域的百分比。第一個(gè)值設(shè)置寬度,第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值,第二個(gè)是設(shè)置為"auto(自動(dòng))" |
cover | 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。 |
contain | 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。 |
示例:
給div元素添加一個(gè)背景圖片