如果你在寫 CSS 時(shí)遇到了 CSS 盒子給了顏色不顯示的問題，下面我們來看看可能出現(xiàn)的原因和解決方法。

.box {
width: 100px;
height: 100px;
background-color: #f00;
}

1. 盒子大小問題

首先，檢查一下盒子的大小。如果盒子的大小為 0，那么它的背景顏色就無法顯示。因此可以檢查一下設(shè)置的寬度和高度值是否正確。

.box {
width: 0;
height: 0;
background-color: #f00;
}

2. 盒子位置問題

另一個(gè)可能的問題是盒子的位置不對。如果盒子被其他元素覆蓋或者被隱藏了起來，那么它的背景顏色也會被隱藏。因此可以通過檢查盒子的位置和其他元素是否重疊來解決問題。

.box {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #f00;
}
.container {
position: relative;
width: 200px;
height: 200px;
}

3. 透明度問題

最后一個(gè)可能的問題是盒子的背景色設(shè)置了透明度。如果背景色的透明度為 0，那么它將是透明的，不會顯示任何顏色。因此可以通過檢查透明度和其他屬性來解決問題。

.box {
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0, 0);
}

總結(jié)一下，如果 CSS 盒子給了顏色不顯示，可以檢查盒子的大小、位置和透明度是否設(shè)置正確。