有一个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的内容。