HTML5 background-color和background-image问题共用问题-白红宇

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

阅读量：5110 次

发布时间：2019-06-13

本文共 1277 字，大约阅读时间需要 4 分钟。

在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;}