HTML5 background-color和background-image问题共用问题

在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动画库收集