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 ...
随机推荐
- Oracle11g_OCM 课堂教学目录表
注:本文为原著(其内容来自 腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...
- Eclipse开发环境配置
1. java环境 安装 本系统使用java6开发,老师使用1.6.0 _45版本开发,如下图所示: "开发工具"目录提供了1.6.0 _45版本32位和64位两个安装程序,大家根 ...
- uva11610 树状数组+素数打表求因子,好题!
/* uva11610 树状数组+素数打表+离散化 打出的素数范围在2-1000000之间,不超过六位数,然后按照格式翻转成七位数 */ #include<bits/stdc++.h> u ...
- ruby学习--条件控制
条件控制 本人喜欢用程序demo记录的方式来记录某方法的使用,如times方法,仅作个人学习记录 #--------------if语句(相反是unless)而while相同于until------- ...
- C#泛型(一)
简介: 先看看泛型的概念--“通过参数化类型来实现在同一份代码上操作多种数据类型.利用“参数化类型”将类型抽象化,从而实现灵活的复用”. 很多初学者在刚开始接触泛型的时候会比较难理解 “泛型” 在这里 ...
- POJ 1995 Raising Modulo Numbers (快速幂)
题意: 思路: 对于每个幂次方,将幂指数的二进制形式表示,从右到左移位,每次底数自乘,循环内每步取模. #include <cstdio> typedef long long LL; LL ...
- openstack学习-nove计算节点部署(五)
nova-compute一般运行在计算节点上,通过message Queue接收管理VM的生命周期 nova-compute通过Libvirt管理KVM,通过XenAPI管理Xen等 一.安装Open ...
- Centos7与Windows10添加Windows10启动项并设置为默认启动
在Centos7下root登陆 编辑 /boot/grub2/grub.cfg vim /boot/grub2/grub.cfg 在第一行添加 menuentry "Windows10&qu ...
- 浅谈html5 video 移动端填坑记
这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...
- 004.Kickstart部署之FTP架构
一 准备 1.1 完整架构:Kickstart+DHCP+VSFTP+TFTP+PXE 1.2 组件应用 Kickstart服务端IP:172.24.8.12 DHCP:提供客户端IP,网关,镜像路径 ...