background、background-color、background-image

1. 遇到的问题

【需求】：为已经设置了渐变色背景的按钮，增加另一种情况设置一种固定颜色。
【错误做法】：在定义的新类中设置background-image为’#E3F1FB’。

【结果】：发现颜色一直没有生效，但是检查了类名确实已经添加，但是颜色没有生效。

原先代码为

// 原先颜色
.container {
    background-image:linear-gradient(180deg, #E3F1FB 0%, #E3F1FB 32%, #ffffff 100%);
}    

【原因】：background-image的值只有none、url、渐变色。无法赋值固定颜色，因此不生效。

总结

1. 基本原则：先设置背景图片，再指定背景颜色。

@color: #000000;
body {
// 先指定背景图片，在指定背景颜色
background: url(http://beijing.gongjuji.net/imgdata/big/d55ae832-f677-44b8-9419-890f77b849a2.jpg) ;
background-color:@color;

// 先指定背景图片，在指定背景颜色
background-image: url(http://beijing.gongjuji.net/imgdata/big/d55ae832-f677-44b8-9419-890f77b849a2.jpg) ;
background-color:@color;
    
// 在混合使用中，不用考虑顺序
background: @color url(http://beijing.gongjuji.net/imgdata/big/d55ae832-f677-44b8-9419-890f77b849a2.jpg);
    background-size: 50% auto;
    background-repeat: no-repeat;
    background-position: center center;
}

.inner {
    @color: red;
    width: 100px;
    height: 100px;
    background: @color;
}

理解

属性	MDN定义	使用	原理	注意
background-image	为一个元素设置一个或者多个背景图像	（1）值为none（2）值为url：url(“xxxx.png”), url(“xxx2.png”);（3）值为渐变色linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url(‘xxx.png’);	图像以z方向堆叠的方式进行，先指定的图像会在之后指定的图像上面绘制	（1）元素border在其上绘制（2）background-color 会在其下绘制
–	–
background-image	为一个元素设置一个或者多个背景图像

（1）解释：background-image的取值有两种，分别是none和，还可以设置渐变色。（用来标记将要显示的图片. 支持多背景设置，背景之间以逗号隔开）

CSS中background与background-image的区别

1. 如果只是设置两张背景图不需要设置CSS样式那么两者都可以使用
2. 如果需要设置样式那就只能用background，如
   

CSS中background-color和background-image

1. 两者可以同时使用，效果等同于下方

background：color url('xxxx.png');

2. 写在前面的覆盖后面的。如果background-image写在background-color前面，那么图片可以显示，会覆盖在background-color上面，当然如果写在后面background-image也是浏览器可以显示的，但是部分安卓手机不显示。因此保险的做法是把background-color写在后面
3. background-color 只能被包含在最后（外）一层。

参考：

1. CSS中background与background-image的区别
   
2. background-color和background-image一起用的问题
3. HTML5 background-color和background-image问题共用问题