|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
深入詳解CSS background-size的3個屬性值auto、contain和cover
作者:admin 時間:2022-3-21 17:52:37 瀏覽:使用background-size，首先要清楚的是我們要處理的是背景，而不是 HTML ( img) 元素。處理HTML（img）元素，是使用前文介紹的object-fit。
background-size的可能值
background-size的可能值為auto、contain和cover。
background-size: auto
使用auto，圖像將保持其默認大?。?/p>
請記住，默認尺寸有時可能會導致圖像模糊（如果太小）
background-size: cover
在這里，圖像將被調整大小以適合容器。如果縱橫比不同，則圖像將被遮蓋以適應。
使用background-size: cover時，請務必考慮圖像的縱橫比
background-size: contain
在這種情況下，圖像將調整大小以適合容器。如果縱橫比關閉，則圖像將被加黑，如下例所示：
background-size: contain調整圖像大小以適合容器
至于background-position，它類似于object-position，唯一的區(qū)別是background-position的默認位置與object-position的不同。
當包含框的縱橫比垂直較大時，top和bottom關鍵字也有效。
何時使用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 更短。
結論
background-size處理圖像縱橫比非常有用。我們并不總是能夠控制為每個圖像設置完美的尺寸，而這正是這個 CSS 功能的亮點所在。
相關文章
標簽: background-size
