在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. 2018-2019-2-20175225 实验二《Java开发环境的熟悉》实验报告

    姓名:张元瑞 学号:20175225 班级:1752 实验课程:JAVA程序设计 实验名称:Java面向对象程序设计 实验时间:2019.4.16 指导老师:娄嘉鹏 实验内容 测试点一 - " ...

  2. cf932d 树上倍增

    题解链接 https://blog.csdn.net/my_sunshine26/article/details/79338601 感觉能做,但是倍增还不是很熟悉,回头再补

  3. charAt和String的用法

    package charpter2; import java.util.Scanner; public class Test { public static void main(String[] ar ...

  4. 20165203 《网络对抗技术》week1 Kali的安装与配置

    20165203 <网络对抗技术>week1 Kali的安装与配置 本人感觉Kali可以做很多有意思的事情,下面是本人的Kali的安装过程. 安装过程 光盘映像文件的下载 登录官网,选择下 ...

  5. dijkstra基础

    #include<iostream> #include<queue> #include<cstdio> #include<cstring> #inclu ...

  6. 072 HBase的架构以及各个模块的功能

    一:整体架构 1.体系结构 2.物理模型 3.存储体系 regionserver—>region->多个store(列簇)->一个memstore和多个storefile 4.HDF ...

  7. 试安装pyQt5+eric6+python安装

    1.先安装pip最新版 安装之前把sit-packages----pip旧版本删掉 然后再cmd输入pip install --user update pip 2.安装pyqt5 pip instal ...

  8. java 如何用pattern 和 Matcher 来使用正则表达式

    java的regex库 java里预留了一个regex库,方便于我们在java里操作正则表达式,或者用它来匹配字符串. 其中比较常用的就是 Pattern 和 Matcher ,pattern是一个编 ...

  9. macos 下安装virtualenv,virtualenvwrapper,然后在pycharm中正常配置方法日志

    1.安装virtualenv或virtualenvwrapper pip install virtualenv pip install virtualenvwraper 注意pip的版本号(查看 pi ...

  10. go语言爬虫 - TapTap用户都喜欢些什么游戏

    前面的废话 说到爬虫,首先想到的当然是python~ 它在机器学习.爬虫数据分析领域可谓是如日中天,十分热门.但我最近在学习go语言,所以就用go写了 TapTap社区 这是一个高品质的游戏分享社区, ...