HTML5 Background-color and background-image problem sharing issues

Background and background colors are rendered simultaneously in a label in HTML5.

The general requirement is to specify the background color for the element and then draw the background image in the background color of the product.

Support: GOOGLE,FF,IE9 above browser.

Basic principle: Set the background picture first, and then specify the background color.

Specify the background picture first, background-image:url the background color (http://beijing.gongjuji.net/imgdata/big/ d55ae832-f677-44b8-9419-890f77b849a2.jpg); Background-color: @color;

Or

Specify the background picture first, background:url the background color (http://beijing.gongjuji.net/imgdata/big/ d55ae832-f677-44b8-9419-890f77b849a2.jpg); Background-color: @color;

Note: You do not need to consider the order when using mixed designations.

In mixed use, do not consider order background: @color URL (http://beijing.gongjuji.net/imgdata/big/d55ae832-f677-44b8-9419-890f77b849a2.jpg);

Examples are as follows:

@color: #000000, Body{///// Specify background image, specify background color//Background:URL (http://beijing.gongjuji.net/imgdata/big/d55ae832-f677-44b8-9419-890f77b849a2.jpg);//Background-color:@color;///// Specify background image, specify background color//Background-image:URL (http://beijing.gongjuji.net/imgdata/big/d55ae832-f677-44b8-9419-890f77b849a2.jpg);//Background-color:@color;//In mixed use, do not consider order 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;}

More:

CSS Page Layout Vertical Center Finishing

CSS3 Flex Layout Finishing (iii)-Project properties

CSS3 Animation Library Collection

HTML5 Background-color and background-image problem sharing issues