卡卡網(wǎng)

使用background-size，首先要清楚的是我們要處理的是背景，而不是 HTML ( img) 元素。處理HTML（img）元素，是使用前文介紹的object-fit。

• 深入詳解 CSS 中的 object-fit 5個(gè)屬性值
• 使用 css object-fit 對(duì)象擬合調(diào)整圖片大小
• 如何使用 CSS object-fit 等比縮放和裁剪圖像

background-size的可能值

background-size的可能值為auto、contain和cover。

background-size: auto

使用auto，圖像將保持其默認(rèn)大?。?/p>

 
請(qǐng)記住，默認(rèn)尺寸有時(shí)可能會(huì)導(dǎo)致圖像模糊（如果太?。?/p>

background-size: cover

在這里，圖像將被調(diào)整大小以適合容器。如果縱橫比不同，則圖像將被遮蓋以適應(yīng)。

 
使用background-size: cover時(shí)，請(qǐng)務(wù)必考慮圖像的縱橫比

background-size: contain

在這種情況下，圖像將調(diào)整大小以適合容器。如果縱橫比關(guān)閉，則圖像將被加黑，如下例所示：

 
background-size: contain調(diào)整圖像大小以適合容器

至于background-position，它類似于object-position，唯一的區(qū)別是background-position的默認(rèn)位置與object-position的不同。

當(dāng)包含框的縱橫比垂直較大時(shí)，top和bottom關(guān)鍵字也有效。

何時(shí)使用background-image

如果圖像是裝飾性的，那么我們可以使用background-image。

.hero {
    position: relative;
    background-image: linear-gradient(to top, #a34242, rgba(0,0,0,0), url("thumb.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

在這種情況下，CSS 更短。

結(jié)論

background-size處理圖像縱橫比非常有用。我們并不總是能夠控制為每個(gè)圖像設(shè)置完美的尺寸，而這正是這個(gè) CSS 功能的亮點(diǎn)所在。

相關(guān)文章

• 深入詳解 CSS 中的 object-fit 5個(gè)屬性值
• 使用 css object-fit 對(duì)象擬合調(diào)整圖片大小
• 如何使用 CSS object-fit 等比縮放和裁剪圖像

標(biāo)簽: background-size