在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. Oracle11g_OCM 课堂教学目录表

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

  2. Eclipse开发环境配置

    1. java环境 安装 本系统使用java6开发,老师使用1.6.0 _45版本开发,如下图所示: "开发工具"目录提供了1.6.0 _45版本32位和64位两个安装程序,大家根 ...

  3. uva11610 树状数组+素数打表求因子,好题!

    /* uva11610 树状数组+素数打表+离散化 打出的素数范围在2-1000000之间,不超过六位数,然后按照格式翻转成七位数 */ #include<bits/stdc++.h> u ...

  4. ruby学习--条件控制

    条件控制 本人喜欢用程序demo记录的方式来记录某方法的使用,如times方法,仅作个人学习记录 #--------------if语句(相反是unless)而while相同于until------- ...

  5. C#泛型(一)

    简介: 先看看泛型的概念--“通过参数化类型来实现在同一份代码上操作多种数据类型.利用“参数化类型”将类型抽象化,从而实现灵活的复用”. 很多初学者在刚开始接触泛型的时候会比较难理解 “泛型” 在这里 ...

  6. POJ 1995 Raising Modulo Numbers (快速幂)

    题意: 思路: 对于每个幂次方,将幂指数的二进制形式表示,从右到左移位,每次底数自乘,循环内每步取模. #include <cstdio> typedef long long LL; LL ...

  7. openstack学习-nove计算节点部署(五)

    nova-compute一般运行在计算节点上,通过message Queue接收管理VM的生命周期 nova-compute通过Libvirt管理KVM,通过XenAPI管理Xen等 一.安装Open ...

  8. Centos7与Windows10添加Windows10启动项并设置为默认启动

    在Centos7下root登陆 编辑 /boot/grub2/grub.cfg vim /boot/grub2/grub.cfg 在第一行添加 menuentry "Windows10&qu ...

  9. 浅谈html5 video 移动端填坑记

    这篇文章主要介绍了浅谈html5 video 移动端填坑记,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 本文介绍了html5 video 移动端填坑记,分享给大家,具体 ...

  10. 004.Kickstart部署之FTP架构

    一 准备 1.1 完整架构:Kickstart+DHCP+VSFTP+TFTP+PXE 1.2 组件应用 Kickstart服务端IP:172.24.8.12 DHCP:提供客户端IP,网关,镜像路径 ...