一、理论：

1.background-break 

a.bounding-box 背景图像在整个内联元素中进行平铺

b.each-box 背景图像在行内中进行平铺

c.continuous 下一行的背景图像紧接着上一行中的图像继续平铺

以上仅在firefox下可用

2.css多背景

a.background-image 设置元素背景图片民，可用相对地址或绝对地址索引背景图像

b.background-repeat 设置元素背景图像的平铺方式 默认repeat

c.background-size 设置元素背景图像的尺寸大小 默认auto

d.background-attachment 设置元素的背景图片是否固定 默认scroll

e.background-clip 控制元素背景图像显示区域大小,默认border-box

f.background-color 设置元素背景颜色

g.多个属性中间必须用","分开

h.最先声明的背景图片将会居于最上层，最后指定的图片放于最底层

二、实践：

1.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        body{

            background: #000 url(images/2-11-test.jpg) center center fixed no-repeat;

            -moz-background-size: cover;

            -webkit-background-size: cover;

            -o-background-size: cover;

            background-size: cover;

        }

        @media only all and (max-width:1024px) and (max-height: 768px){

            body{

                -moz-background-size: 1024px 768px;

                -webkit-background-size: 1024px 768px;

                -o-background-size: 1024px 768px;

                background-size: 1024px 768px;

            }

        }

        @media only all and (max-width:640px) and (max-height: 480px){

            body{

                -moz-background-size: 640px 480px;

                -webkit-background-size: 640px 480px;

                -o-background-size: 640px 480px;

                background-size: 640px 480px;

            }

        }

    </style>

</head>

<body>

    <div></div>

    <div class="div1" ></div>

    <div class="div2" ></div>

    <div class="div3" ></div>

    <div class="div4" ></div>

</body>

</html>

2.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .demo{

            width: 500px;

            height: 300px;

            border:20px solid rgba(104,105,168,0.5);

            border-radius: 10px;

            padding: 80px 60px;

            color:#123589;

            font-size: 25px;

            line-height: 1.5;

            text-align: center;

        }

        .multipleBg{

            background: url("images/round-box1.jpg") no-repeat left top,

            url("images/round-box-2.jpg") no-repeat right top,

            url("images/border-radius.jpg") no-repeat left bottom,

            url("images/tabs-image.jpg") no-repeat right bottom,

            url("images/border.jpg") no-repeat right bottom;

            -webkit-background-origin: border-box,border-box,border-box,border-box,padding-box;

            -moz-background-origin: border-box,border-box,border-box,border-box,padding-box;

            -o-background-origin: border-box,border-box,border-box,border-box,padding-box;

            background-origin: border-box,border-box,border-box,border-box,padding-box;

            -moz-background-clip: border-box;

            -webkit-background-clip: border-box;

            -o-background-clip:border-box;

            background-clip: border-box;

        }

    </style>

</head>

<body>

    <div class="demo multipleBg">用五张背景图片做出这种效果</div>

</body>

</html>

CSS学习（九）-CSS背景的更多相关文章

  1. Html和Css学习笔记-css进阶-盒模型

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  2. 【CSS学习笔记】背景图片

    直接看代码: background: blue; /*页面背景为蓝色,很简单的代码*/background-image:url(small.jpg); /*页面背景是名字叫small.jpg的图片*/ ...

  3. CSS学习笔记——CSS选择器样式总结

    <style type="text/css"> * { padding:0; margin:0; } .box h2 { //内边距左边的距离 padding-left ...

  4. Html和Css学习笔记-css基础知识

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  5. CSS学习笔记——CSS中定位的浮动float

    昨天在解决了盒模型的问题之后又出现了新的知识模糊点:浮动和绝对定位?今天先解决浮动相关的问题,首先列举出想要解决的问题: 1.浮动到底是怎么样的? 2.浮动对元素的影响有什么? 3.浮动主要用来干什么 ...

  6. CSS 学习笔记——CSS Selector

    CSS1 中定义的选择器 类型选择器 用于选择指定类型的元素(其实他就是 html 标签选择器),常见用法如下: body { /*对 body 元素定义样式*/ } body,div { /*同时选 ...

  7. css学习_div+css布局

    1.布局(盒子布局.盒子模型.标准流.脱离文档流) 标准文档流:块级独占一行  ,行内块和行内元素都是和其他共占一行,在盒子中的元素遵循标准流从左到右从上到下排列,超过父元素时会溢出. 一行行看 浮动 ...

  8. 【CSS学习】--- 背景

    一.前言 元素的背景区域包括:元素的内容.内边距和边框区域. CSS中用于设置背景的属性有: background-color 设置背景颜色 background-image 设置背景图片 backg ...

  9. HTML学习笔记 CSS背景样式案例 第六节 （原创） 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 值得学习的CSS知识

    这里零度给大家推荐几个值得学习的CSS技巧,能让你编写网页事半功倍!一.清除默认值 通常 padding 的默认值为 0,background-color 的默认值是 transparent.但是在不 ...

随机推荐

  1. Appscan的第一个测试请求就是提交MAC地址

    GET /AppScan_fingerprint/MAC_ADDRESS_真实的MAC地址.html HTTP/1.0 还好都是合法测试,否则情何以堪...

  2. 微软企业库5.0 学习之路——第四步、使用缓存提高网站的性能（EntLib Caching)

    首先先补习下企业库的Caching Application Block的相关知识: 1.四大缓存方式,在Caching Application Block中,主要提供以下四种保存缓存数据的途径,分别是 ...

  3. 微软企业库5.0 学习之路——第二步、使用VS2010+Data Access模块建立多数据库项目

    现在我就开始进入学习之路的第二步——Data Access模块,这个模块是企业库中被使用频率最高的模块,它很好的封装了数据库操作应用,为我们进行多数据库系统开发提供了便利,只需更改配置文件就 可以很快 ...

  4. tp3.23 nginx lnmp填坑

    thinkphp3.23在apache上可以轻松实现4个路由模式 但是在nginx上就出现问题 我们的环境是用lnmp包实现(地址:https://lnmp.org/) 安装完成后,ta的lnmp的n ...

  5. HDU 1016.Prime Ring Problem-素数环，相邻两数和为素数-DFS

    Prime Ring Problem Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  6. 从零开始做SSH项目（二）

    使用hibernate测试加载数据.删除数据和修改数据等功能时,针对的是与数据库表user对应的User. 为了简化对其他数据表对应的实体类的持久化操作,可以在项目中创建一个BaseHibernate ...

  7. Loj#6432「PKUSC2018」真实排名（二分查找+组合数）

    题面 Loj 题解 普通的暴力是直接枚举改或者不改,最后在判断最后对哪些点有贡献. 而这种方法是很难优化的.所以考虑在排序之后线性处理.首先先假设没有重复的元素 struct Node { int p ...

  8. shell中的特殊变量

    常见的特殊变量: $* 和 $@ 的区别: 1. 在这两个变量没有被双引号""引起来的时候,它们没有区别. 2. 在这两个变量被双引号""引起来的时候,&quo ...

  9. tarfile/zipfile/shutil

    当我们选择使用Python来进行Linux系统管理,那么就免不了会在Python代码中对压缩包进行处理,包括创建压缩包.解压.获取压缩包中的文件列表等 tarfile Python的tarfile标准 ...

  10. Arduino可穿戴开发入门教程LilyPad和LilyPad Simple的介绍

    Arduino可穿戴开发入门教程LilyPad和LilyPad Simple的介绍 LilyPad和LilyPad Simple的介绍 LilyPad和LilyPad Simple是LilyPad微控 ...