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;
}
更多:
HTML5 background-color和background-image问题共用问题的更多相关文章
- unity Changing Game View background color
Change the background color in the camera 参考:http://forum.unity3d.com/threads/changing-game-view-bac ...
- html5+css3中的background: -moz-linear-gradient 用法
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...
- html5+css3中的background: -moz-linear-gradient 用法 (转载)
转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...
- android:background="@color/white" [create file color.xml at res/values/]
<resources><color name="white">#FFFFFF</color><!--白色 --><col ...
- 关于颜色(color、background)
CSS3 HSL colors使用参考指南语法:<length> || <percentage> || <percentage>取值:<length> ...
- How to change the header background color of a QTableView
You can set the style sheet on the QTableView ui->tableView->setStyleSheet("QHeaderView:: ...
- 了解html标签
<title></title> 1.网页标题 2.当我们收藏网页时,默认标题就是网页标题 3.seo(搜索引擎优化) <h1></h1>~<h6& ...
- js制作圆角按钮(兼容谷歌,ie7,ie8)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 第二篇:web之前端之css
前端之css 前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式 ...
- create custom launcher icon 细节介绍
create custom launcher icon 是创建你的Android app的图标 点击下一步的时候,出现的界面就是创建你的Android的图标 Foreground: ” Foregro ...
随机推荐
- 【转载】JavaScript中的属性:如何遍历属性
转载自:http://www.cnblogs.com/ziyunfei/archive/2012/11/03/2752905.html 在JavaScript中,遍历一个对象的属性往往没有在其他语言中 ...
- OCM_第十五天课程:Section6 —》数据库性能调优 _SQL 访问建议 /SQL 性能分析器/配置基线模板/SQL 执行计划管理/实例限制
注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...
- Vue2.0 探索之路——生命周期和钩子函数的一些理解 - JS那些事儿
在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周期不甚了解.只知道简单的使用,而不知道为什么,这 ...
- 关于java中Stream理解
关于java中Stream理解 Stream是什么 Stream:Java 8新增的接口,Stream可以认为是一个高级版本的Iterator.它代表着数据流,流中的数据元素的数量可以是有限的, 也可 ...
- pyhon----模块导入
正常情况 报错(两个导入都报错)
- bzoj2152 树分治
还是太菜了,自己写的wa,但是找不到哪里错了,, 感觉现在学树分治早了点..以后回来再看吧 /* 多少点对之间的路径是3的倍数 */ #include<iostream> #include ...
- uva11983扫描线k次覆盖
自己做的是从下往上扫描的,一直wa,不知道坑在哪里..但是作为模板.我还是找了份不错的ac代码 /* 被覆盖不低于k次的点 每个点对应了一个单位面积,本题把点转面积即是被覆盖不低于k次的面积 可以当做 ...
- streaming优化:spark.streaming.receiver.maxRate
使用spark.streaming.receiver.maxRate来限制你的吞吐的最大信息量. 因为当streaming程序的数据源的数据量突然变大巨大,可能会导致streaming被撑住导致吞吐不 ...
- java web开发阅读笔记:第一章
学习该书前所用推荐书籍<名师讲坛—java开发实战经典> 一web开发前奏 1.1网页发展 首先搞懂. 1.HTTP:超级文本传输协议,是一种通讯协议. 通过这个网络协议WW浏览器与WWW ...
- 第一篇:fastadmin的页面是如何生成的?
第一步: 访问URL http://www.fastadmin.cc/admin/mydir/test/index?addtabs=1 对应的方法是admin模块,controller文件夹下的myd ...