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

HTML5 background-color和background-image问题共用问题的更多相关文章

  1. unity Changing Game View background color

    Change the background color in the camera 参考:http://forum.unity3d.com/threads/changing-game-view-bac ...

  2. html5+css3中的background: -moz-linear-gradient 用法

    在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...

  3. html5+css3中的background: -moz-linear-gradient 用法 (转载)

    转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...

  4. android:background="@color/white" [create file color.xml at res/values/]

     <resources><color name="white">#FFFFFF</color><!--白色 --><col ...

  5. 关于颜色(color、background)

    CSS3 HSL colors使用参考指南语法:<length> || <percentage> || <percentage>取值:<length> ...

  6. How to change the header background color of a QTableView

    You can set the style sheet on the QTableView ui->tableView->setStyleSheet("QHeaderView:: ...

  7. 了解html标签

    <title></title> 1.网页标题 2.当我们收藏网页时,默认标题就是网页标题 3.seo(搜索引擎优化) <h1></h1>~<h6& ...

  8. js制作圆角按钮(兼容谷歌,ie7,ie8)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 第二篇:web之前端之css

    前端之css   前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...

  10. create custom launcher icon 细节介绍

    create custom launcher icon 是创建你的Android app的图标 点击下一步的时候,出现的界面就是创建你的Android的图标 Foreground: ” Foregro ...

随机推荐

  1. 【转载】JavaScript中的属性:如何遍历属性

    转载自:http://www.cnblogs.com/ziyunfei/archive/2012/11/03/2752905.html 在JavaScript中,遍历一个对象的属性往往没有在其他语言中 ...

  2. OCM_第十五天课程:Section6 —》数据库性能调优 _SQL 访问建议 /SQL 性能分析器/配置基线模板/SQL 执行计划管理/实例限制

    注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...

  3. Vue2.0 探索之路——生命周期和钩子函数的一些理解 - JS那些事儿

    在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这 ...

  4. 关于java中Stream理解

    关于java中Stream理解 Stream是什么 Stream:Java 8新增的接口,Stream可以认为是一个高级版本的Iterator.它代表着数据流,流中的数据元素的数量可以是有限的, 也可 ...

  5. pyhon----模块导入

    正常情况 报错(两个导入都报错)

  6. bzoj2152 树分治

    还是太菜了,自己写的wa,但是找不到哪里错了,, 感觉现在学树分治早了点..以后回来再看吧 /* 多少点对之间的路径是3的倍数 */ #include<iostream> #include ...

  7. uva11983扫描线k次覆盖

    自己做的是从下往上扫描的,一直wa,不知道坑在哪里..但是作为模板.我还是找了份不错的ac代码 /* 被覆盖不低于k次的点 每个点对应了一个单位面积,本题把点转面积即是被覆盖不低于k次的面积 可以当做 ...

  8. streaming优化:spark.streaming.receiver.maxRate

    使用spark.streaming.receiver.maxRate来限制你的吞吐的最大信息量. 因为当streaming程序的数据源的数据量突然变大巨大,可能会导致streaming被撑住导致吞吐不 ...

  9. java web开发阅读笔记:第一章

    学习该书前所用推荐书籍<名师讲坛—java开发实战经典> 一web开发前奏 1.1网页发展 首先搞懂. 1.HTTP:超级文本传输协议,是一种通讯协议. 通过这个网络协议WW浏览器与WWW ...

  10. 第一篇:fastadmin的页面是如何生成的?

    第一步: 访问URL http://www.fastadmin.cc/admin/mydir/test/index?addtabs=1 对应的方法是admin模块,controller文件夹下的myd ...