说说background那些坑爹的事儿~

Posted 2020-10-05

啥都不说先上个代码~

.content {

1.  background: url(../images/bg.png) no-repeat bottom center,-webkit-linear-gradient(#639fff,#4b7aff),linear-gradient(#639fff,#4b7aff);
2. border-radius: .2rem;
3. background-size: 8rem auto;

}

看第一个红色部分的属性，我原本想要的是一个渐变的背景色加一个背景图片，结果遍历设备的时候发现安卓4.0的破机子不支持~！！

结果我又默默回去改了，改成下下面那样：

.content {

1.  background: -webkit-linear-gradient(#639fff,#4b7aff),linear-gradient(#639fff,#4b7aff);
2.  border-radius: .2rem;
3.  background-size: 8rem auto;
4.  background-image: url(../images/bg.png);

}

后来默默的被告知原来渐变也是类似于背景图，所以被覆盖了，两个属性只留下了一个

最后附上最后的写法：

.content {

1. background-color: #639fff;
2. border-radius: .2rem;
3. background-size: 8rem auto;
4. background-image: url(../images/bg.png);
5. background-repeat: no-repeat;
6. background-position: bottom center;

}

把渐变的颜色也给改成了单色。。不然你要是想保留渐变色的话也可以把图片直接写成<img src="../images/bg.png">