background-size · CSS基礎

## background-size 屬性 background-size屬性指定背景圖片大小。 JavaScript 語法:object object.style.backgroundSize="60px 80px" * * * ## 語法 ``` background-size: *length*|*percentage*|cover|contain; ``` | 值 | 描述 | | :-- | :-- | | length | 設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為"auto(自動)" | | percentage | 將計算相對于背景定位區域的百分比。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為"auto(自動)" | | cover | 此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區域的最小大小。 | | contain | 此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區域的最大大小。 | * * * ## 在線實例--[拉伸背景圖像](https://www.w3cschool.cn/tryrun/showhtml/trycss3_background-size2) ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> div { background:url(/statics/images/course/img_flwr.gif); background-size:100% 100%; background-repeat:no-repeat; } </style> </head> <body> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div> </body> </html> ``` ## [四個背景圖像圖像橫向拉伸](https://www.w3cschool.cn/tryrun/showhtml/trycss3_background-size3) ``` <!DOCTYPE html> <html> <head> <style> div { background:url(/images/w3css.gif); background-size:25%; border:2px solid #92b901; } </style> </head> <body> <div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div> </body> </html> ```