• 新增属性：

background-clip:指定背景的显示范围

background-origin：指定绘制背景图像时的起点

background-size：指定背景中图像的尺寸

background-break：指定内联元素的背景图像进行平铺时的循环方式

  • background-clip属性

在HTML页面中，一个具有背景的元素通常由元素的内容、内容补白（padding）、边框、外部补白（margin）构成。

元素背景的显示范围在css2与css2.1、css3中的并不相同，在css2中，背景的显示范围是指内部补白之内的范围，不包括边框；而在css2.1至css3中，背景的显示范围是指包括边框在内的范围，在css3中，可以使用background-clip来修改背景的显示范围，如果将background-clip的属性值设定为border，则背景范围包括边框区域，如果设定为padding则不包括边框区域。例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>两种background-clip属性值的对比示例</title>

    <style>

        div {

            background-color: black;

            border: dashed 15px green;

            padding: 30px;

            color: white;

            font-size: 30px;

            font-weight: bold;

            margin: 50px 0;

        }

        div.div1 {

            -moz-background-clip: border;

            -webkit-background-clip: border;

            background-clip: border;

        }

        div.div2 {

            -moz-background-clip: padding;

            -webkit-background-clip: padding;

            background-clip: padding;

        }

    </style>

</head>

<body>

<div id="div1">

    示例

</div>

<div id="div2">

    示例里

</div>

</body>

</html>

（有出入）

  • background-origin属性

在绘制背景图像时，默认是从内部补白（padding）区域的左上角开始，但是可以利用background-origin属性来指定绘制时从边框的左上角开始，或者从内容的左上角开始。

例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>background-origin属性使用示例</title>

    <style>

        div {

            background-color: black;

            border: dashed 15px green;

            padding: 30px;

            color: white;;

            font-size: 2em;

            font-weight: bold;

        }

        div.div1 {

            -moz-background-origin: border;

            -webkit-background-origin: border;

            background-origin: border-box;

        }

        div.div2 {

            -moz-background-origin: padding;

            -webkit-background-origin: padding;

            background-origin: padding-box;

        }

        div.div3 {

            -moz-background-origin: content;

            -webkit-background-origin: content;

            background-origin: content-box;

        }

    </style>

</head>

<body>

<div id="div1">

    示例

</div>

<div id="div2">

    示例里

</div>

<div id="div3">

    示例里示例里

</div>

</body>

</html>
  • background-size属性

在css3中，可以使用background-size属性来指定背景图像的尺寸，例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>background-size属性的使用示例</title>

    <style>

      div{

          background-color: black;

          background-image: url(flower-red.png);

          padding:30px;

          color:white;

          font-size:2em;

          font-weight: bold;

          background-size: 40px 20px;

          -webkit-background-size: 40px 20px;

      }

    </style>

</head>

<body>

<div>

    示例

</div>

</body>

</html>
  • background-break属性

将background-break属性指定为bounding-box的时候，背景图像在整个内联元素中进行平铺，指定为each-box的时候，背景图像在每一行中进行平铺，指定为continuous的时候，下一行中的图像紧接着上一行中的图像继续平铺，例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>background-break属性的使用示例</title>

    <style>

      span{

          background-color: #888888;

          background-image: url(flower-green.png);

          padding: 0.2em;

          color:gray;

          line-height: 1.5;

          font-size: 1em;

          font-weight: bold;

      }

        div.div1 span{

            -moz-background-inline-policy:bouding-box;

        }

      div.div2 span{

          -moz-background-inline-policy:each-box;

      }

      div.div3 span{

          -moz-background-inline-policy:continuous;

      }

    </style>

</head>

<body>

<div class="div1">

    示例

</div>

<div class="div2">

    示例

</div>

<div class="div3">

    示例

</div>

</body>

</html>
  • 在一个元素中显示多个背景图像
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>在一个元素中显示多个背景图像的示例</title>

    <style>

     div{

         background-image: url(flower-red.png),url(flower-green.png),url(sky.jpg);

         background-repeat: no-repeat,repeat-x,no-repeat;

         background-position: 3% 98%, 85%,conter conter,top;

         width:300px;

         padding: 90px 0px;

     }

    </style>

</head>

<body>

<div></div>

</body>

</html>
  • border-radius属性

在css3中，只要使用border-radius属性指定好圆角的半径，就可以绘制圆角边框了。例子如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>绘制圆角边框示例</title>

    <style>

    div{

        border:solid 5px blue;

        border-radius:20px;

        -moz-border-radius: 20px;

        -o-border-radius:20px;

        -webkit-border-radius: 20px;

        background-color: skyblue;

        padding: 20px;

        width: 180px;

    }

    </style>

</head>

<body>

<div>文字问文字问文字问文字问文字问文字问文字问</div>

</body>

</html>

CSS3学习系列之背景相关样式（一）的更多相关文章

  1. CSS3学习系列之背景相关样式（二）

    在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...

  2. CSS3学习系列之盒样式（一）

    盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...

  3. CSS3学习系列之盒样式（二）

    text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...

  4. CSS3学习系列之布局样式（二）

    使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> ...

  5. CSS3学习系列之布局样式（一）

    多栏布局 使用float属性或position属性的缺点: 使用float属性或position属性进行页面中的简单布局的例子. <!DOCTYPE html> <html lang ...

  6. [CSS3]学习笔记-CSS基本样式讲解

    1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...

  7. css3学习系列之选择器（一）

    CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...

  8. CSS3学习系列之选择器（二）

    first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...

  9. CSS3学习系列之选择器（四）

    使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...

随机推荐

  1. java内存模型6-final

    与前面介绍的锁和volatile相比较,对final域的读和写更像是普通的变量访问.对于final域,编译器和处理器要遵守两个重排序规则: 在构造函数内对一个final域的写入,与随后把这个被构造对象 ...

  2. Unite'17 Shanghai再一次问候

    Unite'17 Shanghai再一次问候 --暨Unity2017年度大会 2017年5月11日,主题为"再一次问候"的Unity年度盛会在上海国际会议中心举行,这是Unity ...

  3. 基于python的爬虫（一）

    抓取网页 python核心库 urllib2 实现对静态网页的抓取,不得不说,"人生苦短,我用python"这句话还是有道理的,要是用java来写,这估计得20行代码 (对不住了博 ...

  4. Hadoop中MapReduce作业流程图

    MapReduce的流程分为11个步骤,4个实体 1.客户端:编写MapReduce的代码,配置作业,提交作业 2.JobTracker:初始化作业,分配作业,与TaskTracker通信,协调整个作 ...

  5. Java Primitives and Bits

    Integer when processors were 16 bit, an int was 2 bytes. Nowadays, it's most often 4 bytes on a 32 b ...

  6. java虚拟机学习-慢慢琢磨JVM(2-1)ClassLoader的工作机制

    ClassLoader的工作机制 java应用环境中不同的class分别由不同的ClassLoader负责加载. 一个jvm中默认的classloader有Bootstrap ClassLoader. ...

  7. Amazing ASP.NET Core 2.0

    前言 ASP.NET Core 的变化和发展速度是飞快的,当你发现你还没有掌握 ASP.NET Core 1.0 的时候, 2.0 已经快要发布了,目前 2.0 处于 Preview 1 版本,意味着 ...

  8. 入坑以来最清晰的this指南[老哥们来交流指正]

    直接放有道云笔记的链接,博客园的markdown总是用不好. 1.这一篇是this的绑定(call,apply,bind) http://note.youdao.com/noteshare?id=c3 ...

  9. kairosdb + cassandra Setup

    安装cassandra 下载 cassandra cassandra download mirror wget http://mirror.bit.edu.cn/apache/cassandra/2. ...

  10. R formulas in Spark and un-nesting data in SparklyR: Nice and handy!

    Intro In an earlier post I talked about Spark and sparklyR and did some experiments. At my work here ...