css 设置背景的时候有图片有背景色，容器又要随内容变化高度的情况。

有一个div容器：

<div class="background-test"></div>

场景：div容器的背景头部是一张图，其余的地方用背景色填充，这个div容器要随内容撑大，所以不能设置成position:absolute，直接像下面这样设置样式的话：

background:url(*****) 颜色值;

如果背景图是png格式，有些透明的地方就显示出来上面设置的 颜色值 出来，这样和设计师设计的稿子不符，所以可以用以下样式设置：

.background-test{
    position: relative;
    height:auto;
    width:100%;
    background:url('https://p1.meituan.net/1440.590/codeman/d2ab674fa0e4c875865e524d82fe15a34372569.png') no-repeat;
    color:#000
}
.background-test::before{
    content:'';
    background-color:pink;
    position:absolute;
    color:#fff;
    bottom:0;
    top:590px;
    left:0;
    right:0;
    z-index:-1;
    height:auto;
    width:100%;
}

给这个div设置伪元素，记得设置position:absolute;top:590px;z-index:-1;，其中top:590px是为了给背景图空出位置，z-index:-1是防止伪类层在div容器之上，覆盖div的内容。