您好,登錄后才能下訂單哦!
小編給大家分享一下css設置背景圖片大小的方法,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
在css中,可以使用background-size屬性來設置背景圖片的大小;語法格式為“background-size:length|%|cover|contain;”,默認值為“auto”。
css設置背景圖片大小
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> body { background: url(img/1.jpg); background-size: 80px 60px; background-repeat: no-repeat; padding-top: 40px; } </style> </head> <body> <p> Lorem ipsum,中文又稱“亂數假文”, 是指一篇常用于排版設計領域的拉丁文文章 ,主要的目的為測試文章或文字在不同字型、版型下看起來的效果。 </p> <p>原始圖片: <img src="img/1.jpg" alt="Flowers" width="224" height="162"></p> </body> </html>
效果圖:
css background-size屬性
background-size屬性指定背景圖片大小。
語法
background-size: length|percentage|cover|contain;
值 | 描述 |
---|---|
length | 設置背景圖片高度和寬度。第一個值設置寬度,第二個值設置的高度。如果只給出一個值,第二個是設置為 auto(自動) |
percentage | 將計算相對于背景定位區域的百分比。第一個值設置寬度,第二個值設置的高度。如果只給出一個值,第二個是設置為"auto(自動)" |
cover | 此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區域的最小大小。 |
contain | 此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區域的最大大小。 |
看完了這篇文章,相信你對“css設置背景圖片大小的方法”有了一定的了解,如果想了解更多相關知識,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。