CSS 中的background-size
屬性可以指定背景圖片如何拉伸。其屬性值可以是長度值(如像素)或百分比,也可以是關(guān)鍵詞cover
或contain
。
當(dāng)屬性值為cover
時(shí),背景圖片會被縮放到恰好覆蓋整個(gè)背景區(qū)域,并且保持圖片原始的寬高比例。
background-size: cover;
當(dāng)屬性值為contain
時(shí),背景圖片會被縮放以完全裝入背景區(qū)域,可能會出現(xiàn)背景區(qū)域不完全填充的情況。
background-size: contain;
如果需要指定具體的長度值或百分比,可以用以下語法:
background-size: 寬度 高度; background-size: 寬度%; background-size: auto 高度;
如果指定的寬高比例與圖片原始的寬高比例不一致,那么圖片會被強(qiáng)制拉伸到指定的寬高比例。
例如,下面的 CSS 規(guī)則會把背景圖片設(shè)置為恰好覆蓋整個(gè)背景區(qū)域,并且保持寬高比例為 16:9:
background-image: url("image.jpg"); background-size: 100% 56.25%;
上一篇ajax如何向前臺傳對象
下一篇css如何讓圖片靠左