在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. tsconfig.json配置

    什么工具看什么官网-一般都会有说明的 https://www.tslang.cn/docs/handbook/tsconfig-json.html 概述 如果一个目录下存在一个tsconfig.jso ...

  2. HTTP2.0 简明笔记

    前言 RFC2616发布以来,一直是互联网发展的基石.HTTP协议也成为了可以在任何领域使用的核心协议,基于这个协议人们设计和部署了越来越多的应用.HTTP的简单本质是其快速发展的关键,但随着越来越多 ...

  3. PTA之多项式求值

    时间限制: 400ms 内存限制: 64MB 代码长度限制: 16KB 函数接口定义: double f( int n, double a[], double x ); 其中n是多项式的阶数,a[]中 ...

  4. python3安装pip3的方法

    1.点击链接:https://bootstrap.pypa.io/get-pip.py,并下载get-pip.py文件; 2.文件下载完成之后,cd到当前目录,并进行安装,如下: root@zhuzh ...

  5. Django ORM OneToOneField

    一对一关系 一对一关系与多对一关系非常相似.如果你在模型中定义一个OneToOneField,该模型的实例将可以通过该模型的一个简单属性访问关联的模型. class Person(models.Mod ...

  6. BZOJ1819 [JSOI]Word Query电子字典 Trie

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1819 题意概括 字符串a与字符串b的编辑距离是指:允许对a或b串进行下列“编辑”操作,将a变为b或 ...

  7. 【Java】 剑指offer(34) 二叉树中和为某一值的路径

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 输入一棵二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有 ...

  8. Pyinstaller打包附带DLL、图标和压缩EXE方法

    Pyinstaller打包附带DLL.图标和压缩EXE方法     转载: https://blog.csdn.net/xinyingzai/article/details/80282856   目的 ...

  9. poj3259 Wormholes (判负环)【spfa】(模板)

    <题目链接> 题目大意: John的农场里N块地,M条路连接两块地,W个虫洞,虫洞是一条单向路,会在你离开之前把你传送到目的地,就是当你过去的时候时间会倒退Ts.我们的任务是知道会不会在从 ...

  10. caffe 利用VGG训练自己的数据

    写这个是因为有童鞋在跑VGG的时候遇到各种问题,供参考一下. 网络结构 以VGG16为例,自己跑的细胞数据 solver.prototxt: net: "/media/dl/source/E ...