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動畫庫收集