在css中,可以利用background-size屬性設定背景圖片的大小,該屬性可以指定背景圖片的尺寸,語法格式「background-size: 帶長度單位的數值|百分比值|cover|contain ;」。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
在css中,可以利用background-size屬性設定背景圖片的大小;可以長度值或百分比顯示,也可以透過cover和contain來伸縮圖片。
background-size:auto;/* 默认值,不改变背景图片的高度和宽度 */ background-size:100px 50px;/* 第一个值为宽,第二个值为高,当设置一个值时,将其作为图片宽度来等比缩放 */ background-size:10%;/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 */ background-size:cover;/* 将背景图片等比缩放填满整个容器 */ background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */
屬性值:
#值 | 描述 |
---|---|
length |
設定背景圖像的高度和寬度。 第一個值設定寬度,第二個值設定高度。 如果只設定一個值,則第二個值會被設定為 "auto"。 |
percentage |
#以父元素的百分比來設定背景圖像的寬度和高度。 第一個值設定寬度,第二個值設定高度。 如果只設定一個值,則第二個值會被設定為 "auto"。 |
cover |
將背景影像擴展至足夠大,以使背景影像完全覆蓋背景區域。 背景圖像的某些部分也許無法顯示在背景定位區域。 |
contain | 將圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域。 |
程式碼範例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background: url(img/5.jpg); background-size: 100px 100px; -moz-background-size: 100px 100px; /* 老版本的 Firefox */ background-repeat: no-repeat; padding-top: 80px; } </style> </head> <body> <p>上面是缩小的背景图片。</p> <p>原始图片:<br /> <img src="img/5.jpg" alt="Flowers"></p> </body> </html>
效果圖:
css影片教學)
以上是css如何設定背景圖片的大小的詳細內容。更多資訊請關注PHP中文網其他相關文章!