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 ...
随机推荐
- 2018-2019-2-20175225 实验二《Java开发环境的熟悉》实验报告
姓名:张元瑞 学号:20175225 班级:1752 实验课程:JAVA程序设计 实验名称:Java面向对象程序设计 实验时间:2019.4.16 指导老师:娄嘉鹏 实验内容 测试点一 - " ...
- cf932d 树上倍增
题解链接 https://blog.csdn.net/my_sunshine26/article/details/79338601 感觉能做,但是倍增还不是很熟悉,回头再补
- charAt和String的用法
package charpter2; import java.util.Scanner; public class Test { public static void main(String[] ar ...
- 20165203 《网络对抗技术》week1 Kali的安装与配置
20165203 <网络对抗技术>week1 Kali的安装与配置 本人感觉Kali可以做很多有意思的事情,下面是本人的Kali的安装过程. 安装过程 光盘映像文件的下载 登录官网,选择下 ...
- dijkstra基础
#include<iostream> #include<queue> #include<cstdio> #include<cstring> #inclu ...
- 072 HBase的架构以及各个模块的功能
一:整体架构 1.体系结构 2.物理模型 3.存储体系 regionserver—>region->多个store(列簇)->一个memstore和多个storefile 4.HDF ...
- 试安装pyQt5+eric6+python安装
1.先安装pip最新版 安装之前把sit-packages----pip旧版本删掉 然后再cmd输入pip install --user update pip 2.安装pyqt5 pip instal ...
- java 如何用pattern 和 Matcher 来使用正则表达式
java的regex库 java里预留了一个regex库,方便于我们在java里操作正则表达式,或者用它来匹配字符串. 其中比较常用的就是 Pattern 和 Matcher ,pattern是一个编 ...
- macos 下安装virtualenv,virtualenvwrapper,然后在pycharm中正常配置方法日志
1.安装virtualenv或virtualenvwrapper pip install virtualenv pip install virtualenvwraper 注意pip的版本号(查看 pi ...
- go语言爬虫 - TapTap用户都喜欢些什么游戏
前面的废话 说到爬虫,首先想到的当然是python~ 它在机器学习.爬虫数据分析领域可谓是如日中天,十分热门.但我最近在学习go语言,所以就用go写了 TapTap社区 这是一个高品质的游戏分享社区, ...