CSS 背景圖片可以使用 background-image 屬性來(lái)設(shè)置,而拉升圖片則要使用 background-size 屬性進(jìn)行控制。下面是一些示例代碼:
/* 設(shè)置背景圖片并拉伸以填充整個(gè)元素 */ .example1 { background-image: url("example.jpg"); background-size: cover; } /* 使用百分比值拉升圖片 */ .example2 { background-image: url("example.jpg"); background-size: 100% 100%; } /* 等比例拉伸圖片至寬度為 100%,高度自適應(yīng) */ .example3 { background-image: url("example.jpg"); background-size: 100% auto; } /* 按照一定比例拉伸圖片 */ .example4 { background-image: url("example.jpg"); /* 按照 2:1 比例拉伸圖片 */ background-size: 200% 100%; }
注意,背景圖片拉伸會(huì)影響圖片的質(zhì)量,如果使用了一個(gè)比原圖大很多的拉伸比例,會(huì)導(dǎo)致圖片模糊等問(wèn)題。因此,使用背景圖片拉伸時(shí)要注意選擇合適的拉伸比例,并確保原圖片質(zhì)量足夠高。