CSS中背景的對齊問題一直是前端開發(fā)的一個熱門話題，特別是背景是否能夠底部對齊。今天，我們就來詳細(xì)探討一下CSS如何實現(xiàn)背景底部對齊。

/* 示例代碼 */
.container {
position: relative;
background: url("img/bg.jpg") no-repeat center center fixed;
background-size: cover;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background: #fff;
}

要實現(xiàn)背景底部對齊，我們需要先將容器的背景圖設(shè)置為居中不重復(fù)，并且等比例縮放到容器大小。這里我們通過background和background-size屬性實現(xiàn)。

.container {
background: url("img/bg.jpg") no-repeat center center fixed;
background-size: cover;
}

接下來，我們的目標(biāo)是容器底部的白色塊塊要與背景底部對齊。我們可以通過給白色塊塊設(shè)置position:absolute，并且bottom屬性為0來實現(xiàn)。同時設(shè)置left:0和right:0，讓白色塊塊與容器等寬。

.bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background: #fff;
}

通過這樣的方式，背景圖和底部塊塊之間的間距是動態(tài)的，無論容器高度如何變化，底部塊塊都會緊貼底部，實現(xiàn)了背景底部對齊的效果。

當(dāng)然，我們還可以通過flexbox和grid布局等方式實現(xiàn)背景底部對齊，這里就不再贅述了。