在HTML5中支持背景图片和背景颜色在一个标签中同时渲染。
一般的需求是为元素指定背景颜色，然后在背景色的商品绘制背景图。
支持:Google,FF,IE9以上浏览器。
基本原则：先设置背景图片，再指定背景颜色。
//先指定背景图片，在指定背景颜色background-image: url(http://beijing.gongjuji.net/imgdata/big/d55ae832-f677-44b8-9419-890f77b849a2.jpg) ;background-color:@color;
或
//先指定背景图片，在指定背景颜色background: 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) ;
示例如下：
@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;}更多：
CSS网页布局垂直居中整理
CSS3 Flex布局整理(三)-项目属性
Css3动画库收集
HTML5 background-color和background-image问题共用问题
原文地址：http://www.cnblogs.com/tianma3798/p/7905341.html