CSS是一種用于網頁設計的技術，可以用來控制網頁的樣式和布局。其中，背景顏色是一個很重要的屬性，它可以為頁面增加色彩，使它們更加生動有趣。但是，如果背景顏色和圖片重疊在一起，可能會讓圖片失去焦點，影響視覺效果。因此，我們需要學會如何讓背景顏色顯示在圖片的上面。

/* 在CSS中，可以使用z-index屬性來控制元素的層級關系 */
img {
position: relative;
z-index: -1; /* 將圖片的層級設為負數，讓背景顏色覆蓋在上面 */
}
div {
width: 200px;
height: 200px;
background-color: #F00; /* 背景顏色 */
position: absolute;
top: 0;
left: 0; /* 將div定位到圖片的頂部左邊 */
z-index: 1; /* 將div的層級設為正數，讓它在圖片上面 */
}

以上代碼中，我們先將圖片的position屬性設置為relative，這樣它就可以被定位。然后，將z-index屬性設為負數，讓它的層級低于div元素。

接著，我們創建一個div元素來顯示背景顏色。將它的position屬性設為absolute，讓它從頁面中的原始位置渲染。然后，將z-index屬性設為正數，讓它的層級高于圖片。

這樣，我們就可以讓背景顏色顯示在圖片上面。如果你想將背景顏色透明度降低，可以使用rgba顏色值來設置，如下所示：

div {
background-color: rgba(255, 0, 0, 0.5); /* 背景顏色透明度為50% */
}

以上代碼中，我們使用rgba(255, 0, 0, 0.5)設置背景顏色，其中最后一個屬性0.5代表了背景顏色的透明度。這樣，我們就可以讓背景顏色透明度降低，以便更好地展示圖片。

綜上所述，我們可以通過設置z-index屬性來控制元素的層級關系，從而讓背景顏色顯示在圖片上面。同時，我們還可以通過rgba顏色值來調整背景顏色的透明度，以獲得更好的視覺效果。