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

时间 2019-12-04

标签 html5 html background color image 问题共用栏目 HTML5 繁體版

原文原文链接

在HTML5中支持背景图片和背景颜色在一个标签中同时渲染。html

通常的需求是为元素指定背景颜色，而后在背景色的商品绘制背景图。浏览器

支持:Google,FF,IE9以上浏览器。布局

基本原则：先设置背景图片，再指定背景颜色。动画

//先指定背景图片，在指定背景颜色
background-image: url(http://beijing.gongjuji.net/imgdata/big/d55ae832-f677-44b8-9419-890f77b849a2.jpg) ;
background-color:@color;

或url

//先指定背景图片，在指定背景颜色
background: url(http://beijing.gongjuji.net/imgdata/big/d55ae832-f677-44b8-9419-890f77b849a2.jpg) ;
background-color:@color;

注：在使用混合指定方式，不须要考虑顺序。spa

// 在混合使用中，不用考虑顺序
background:@color url(http://beijing.gongjuji.net/imgdata/big/d55ae832-f677-44b8-9419-890f77b849a2.jpg) ;

示例以下：.net

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

更多：3d

CSS网页布局垂直居中整理code

CSS3 Flex布局整理(三)-项目属性htm

Css3动画库收集