语法缩写如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

注意：用逗号隔开每组background的缩写值；如果有size值，需要紧跟position并且用"/"隔开；分解写法时，background-color只能设置一个。

例如：

background:url(./image.jpg) no-repeat left top / 200px 70px,url(./image.jpg) no-repeat right bottom / 150px 60px;

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>多重背景</title>

<style type="text/css">

.demo {

    width: 300px;

    height: 140px;

    border: 1px solid #999;

    background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top / 200px 70px,

    url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom / 150px 60px;

}

</style>

</head>

<body>

<div class="demo"></div>

</body>

</html>

multiple backgrounds 多重背景的更多相关文章

  1. multiple backgrounds

    multiple backgrounds 多重背景,也就是CSS2里background的属性外加origin.clip和size组成的新background的多次叠加,缩写时为用逗号隔开的每组值:用 ...

  2. CSS 第四天 多重背景 变形 过渡

    背景原点:background-origin 图片起始位置 border-box包括边框 padding-box边框内 content-box 内容内 **background-repeat 为no- ...

  3. css（字体，文本，边距，边框，阴影，背景，渐变，多重背景，列表）

    font-family 设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size ...

  4. CSS Backgrounds（背景）

    CSS Backgrounds(背景) CSS 背景属性用于定义HTML元素的背景. CSS 属性定义背景效果: background-color background-image backgroun ...

  5. CSS3背景图片（多重背景、起始位置、裁剪、尺寸）

    一.多重背景图片 ①CSS3允许我们在一个元素上添加多个图片 ②多重背景可以把多个图片资源添加到background属性上,用逗号隔开,然后用background-position把他们定位到你想要的 ...

  6. CSS3实例分享之多重背景的实现(Multiple backgrounds)

    CSS3的诞生为我们解决了这一问题,在CSS3里,通过background-image或者background可以为一个容器设置多张背景图像,也就是说可以把不同背景图象只放到一个块元素里. 首先我们来 ...

  7. 【Multiple backgrounds】用CSS3实现网页多重背景

    对于背景属性background-image大家应该已经很熟悉了,在CSS2中与它相关的属性还有background-repeat(设置背景是否重复及重复的方式).background-positio ...

  8. css定义多重背景动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style typ ...

  9. CSS背景使用，引入、尺寸、平铺、定位、多重背景

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

随机推荐

  1. python脚本初探---新手如何直接编写一个hello world模块即可执行的.py文件

    废话不多说,就讲一下这个背景吧: 事情是这个样子的~ 本着好学的精神,咱就买了本书,学习python结果呢,发现python的教程都是一个样子滴,上来的第一个hello world 都是通过IDLE来 ...

  2. 转:关掉Archlinux中烦人的响铃

    http://www.0597seo.com/?p=461 F**K,在Archlinux中,每当在听音乐,声音开得挺大的,忽然在控制台输错了命令,那可恶的该死的警告声猛的一下总是吓的我精神晃晃(这是 ...

  3. DataGridView重绘painting简单实例

    private void dataGridViewX1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e) { & ...

  4. JavaScript 之 执行前台函数

    1.OnClientClick (vs2003不支持这个方法) <asp:Button ID="Button" runat="server" Text=& ...

  5. 中科院 2014年GCT考前辅导课程安排

    : 2014年GCT考前辅导课程安排 发布时间: 2014-07-14 阅读次数:1225                       默认字体                   9pt       ...

  6. .Net中的socket编程例子

    vb2010: '发送端代码Public Class Form1    Inherits System.Windows.Forms.FormPrivate Sub Button1_Click(ByVa ...

  7. WWH学习模式

    WWH是"What+Why+How"的简称,是对学习方法最完美的概括."如果不按照WWH这种模式来教学,90%的结果是老师没教好,学生学不好." 1.What( ...

  8. 1.5.2 什么是Analyzer--分析器

    分析器检查字段的文本,然后生成一个token流.在schema.xml中,分析器作为<fieldType>的一个子元素.在普通的使用当中,只有字段类型solr.TextField使用分析器 ...

  9. Java SE ---类，方法，对象等

    1,面向对象程序设计的三大基本特征:继承(Inheritence).封装(Encapsulation).多态(Polymorphism)     2,如何定义类?            修饰符 cla ...

  10. mysql优化方法

    1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽 ...