css背景图上增加色块 |gulp编译scss

/* css代码 */
.background{
background-image: url("背景图的路径");
background-color: #fff;
border: 1px solid #ccc;
height: 600px;
position: relative; /* 注意这里要设置相对定位 */
}
.background::after{
content: "";
position: absolute; /* 要使用绝对定位 */
width: 100px;
height: 100px;
background-color: #f00; /* 设置色块的颜色 */
bottom: 20px;
right: 20px;
}

上述代码中的.background是添加背景图的容器，要设置其相对定位，否则后面添加的色块会找不到位置。而在.background中使用了::after伪元素来添加色块，其意义是在.background的内部创建一个内容为空的元素，该元素作为添加背景图的容器的子元素。

在::after中设置了position:absolute使用绝对定位，其使得该元素的位置相对于添加背景图的容器进行定位。然后大家设置了该元素的宽高和背景色，分别是100px，100px和红色。

在最后，大家通过bottom: 20px和right: 20px来调整色块的位置。其中， bottom 表示从下方的距离，right 表示从右侧的距离。

使用上述方法，大家可以在css背景图上增加色块，从而使页面更加美观。