在制作網(wǎng)站頁面時(shí)，經(jīng)常需要使用背景圖來裝飾，但是有時(shí)候單純的背景圖顯得過于單調(diào)，需要加上一些裝飾色塊。下面介紹如何在css背景圖上添加色塊。

/* css代碼 */
.background{
background-image: url("背景圖的路徑");
background-color: #fff;
border: 1px solid #ccc;
height: 600px;
position: relative; /* 注意這里要設(shè)置相對(duì)定位 */
}
.background::after{
content: "";
position: absolute; /* 要使用絕對(duì)定位 */
width: 100px;
height: 100px;
background-color: #f00; /* 設(shè)置色塊的顏色 */
bottom: 20px;
right: 20px;
}

上述代碼中的.background是添加背景圖的容器，要設(shè)置其相對(duì)定位，否則后面添加的色塊會(huì)找不到位置。而在.background中使用了::after偽元素來添加色塊，其意義是在.background的內(nèi)部創(chuàng)建一個(gè)內(nèi)容為空的元素，該元素作為添加背景圖的容器的子元素。

在::after中設(shè)置了position:absolute使用絕對(duì)定位，其使得該元素的位置相對(duì)于添加背景圖的容器進(jìn)行定位。然后我們設(shè)置了該元素的寬高和背景色，分別是100px，100px和紅色。

在最后，我們通過bottom: 20px和right: 20px來調(diào)整色塊的位置。其中， bottom 表示從下方的距離，right 表示從右側(cè)的距離。

使用上述方法，我們可以在css背景圖上增加色塊，從而使頁面更加美觀。