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 ...
随机推荐
- tsconfig.json配置
什么工具看什么官网-一般都会有说明的 https://www.tslang.cn/docs/handbook/tsconfig-json.html 概述 如果一个目录下存在一个tsconfig.jso ...
- HTTP2.0 简明笔记
前言 RFC2616发布以来,一直是互联网发展的基石.HTTP协议也成为了可以在任何领域使用的核心协议,基于这个协议人们设计和部署了越来越多的应用.HTTP的简单本质是其快速发展的关键,但随着越来越多 ...
- PTA之多项式求值
时间限制: 400ms 内存限制: 64MB 代码长度限制: 16KB 函数接口定义: double f( int n, double a[], double x ); 其中n是多项式的阶数,a[]中 ...
- python3安装pip3的方法
1.点击链接:https://bootstrap.pypa.io/get-pip.py,并下载get-pip.py文件; 2.文件下载完成之后,cd到当前目录,并进行安装,如下: root@zhuzh ...
- Django ORM OneToOneField
一对一关系 一对一关系与多对一关系非常相似.如果你在模型中定义一个OneToOneField,该模型的实例将可以通过该模型的一个简单属性访问关联的模型. class Person(models.Mod ...
- BZOJ1819 [JSOI]Word Query电子字典 Trie
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1819 题意概括 字符串a与字符串b的编辑距离是指:允许对a或b串进行下列“编辑”操作,将a变为b或 ...
- 【Java】 剑指offer(34) 二叉树中和为某一值的路径
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 输入一棵二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有 ...
- Pyinstaller打包附带DLL、图标和压缩EXE方法
Pyinstaller打包附带DLL.图标和压缩EXE方法 转载: https://blog.csdn.net/xinyingzai/article/details/80282856 目的 ...
- poj3259 Wormholes (判负环)【spfa】(模板)
<题目链接> 题目大意: John的农场里N块地,M条路连接两块地,W个虫洞,虫洞是一条单向路,会在你离开之前把你传送到目的地,就是当你过去的时候时间会倒退Ts.我们的任务是知道会不会在从 ...
- caffe 利用VGG训练自己的数据
写这个是因为有童鞋在跑VGG的时候遇到各种问题,供参考一下. 网络结构 以VGG16为例,自己跑的细胞数据 solver.prototxt: net: "/media/dl/source/E ...