一、基本設(shè)置
使用 CSS 可以通過以下屬性設(shè)置背景圖片：
-
background-image: 設(shè)置背景圖片的 URL。 -
background-size: 設(shè)置背景圖片的大小。可以設(shè)置為絕對像素值，也可以設(shè)置為百分比或 "cover"（填充整個容器）或 "contain"（完整顯示圖片）。 -
background-repeat: 設(shè)置背景圖片是否重復(fù)?？梢栽O(shè)置為 "repeat"（重復(fù)）、"no-repeat"（不重復(fù)）、"repeat-x"（橫向重復(fù)）或 "repeat-y"（縱向重復(fù)）。 -
background-position: 設(shè)置背景圖片的位置?？梢栽O(shè)置為絕對像素值，也可以設(shè)置為百分比或關(guān)鍵字（如 "center"、"top"、"bottom"、"left" 或 "right"）。
例如：
.bg-img {
background-image: url("bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}?
二、具體場景設(shè)置
1、設(shè)置左側(cè)區(qū)域背景圖片高度填充整個可視區(qū)域，圖片寬度自適應(yīng)
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>?文章來源：http://www.zghlxwxcb.cn/news/detail-522052.html
.container {
width: 100vw;
height: 100vh;
background: #fff;
display: flex;
}
.left {
height: 100vh;
width: 40vw;
background: url("bg.jpg") no-repeat left;
/* 當(dāng)使用該設(shè)置時（方法一），當(dāng)可視高度不變時，可視寬度變化時，背景圖片的高度也會自適應(yīng)變化 */
background-size: contain;
/* 當(dāng)使用該設(shè)置時（方法二），當(dāng)可視高度不變時，可視寬度變化時，背景圖片的寬高不會變化，但在該場景下，背景圖片右側(cè)會被遮擋 */
background-size: auto 100%;
}
.right {
height: 100vh;
width: 60vw;
}通過上面的代碼可知，無法完全實(shí)現(xiàn)「設(shè)置左側(cè)區(qū)域背景圖片高度填充整個可視區(qū)域，圖片寬度自適應(yīng)」。文章來源地址http://www.zghlxwxcb.cn/news/detail-522052.html
到了這里，關(guān)于CSS 設(shè)置背景圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
