• 新增属性：

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. poj2513- Colored Sticks 字典树+欧拉通路判断

    题目链接:http://poj.org/problem?id=2513 思路很容易想到就是判断欧拉通路 预处理时用字典树将每个单词和数字对应即可 刚开始在并查集处理的时候出错了 代码: #includ ...

  2. 转：Java compiler level does not match the version of the installed Java project facet

    a.问题描述:eclipse加载新的项目后报一个错误,具体描述如下: Description Resource PathLocation Type Java compiler level does n ...

  3. JWebFileTrans(JDownload): 一款可以从网络上下载文件的小程序(三)，多线程断点下载

    一 前言 本篇博客是<JWebFileTrans(JDownload):一款可以从网络上下载文件的小程序>系列博客的第三篇,本篇博客的内容主要是在前两篇的基础上增加多线程的功能.简言之,本 ...

  4. Java学习笔记——排序算法之简单排序

    男儿何不带吴钩,收取关山五十州.请君暂上凌烟阁,若个书生万户侯? --南园十三首 三种排序法: 1.冒泡法 2.简单选择法 3.直接插入法   上代码: 1.冒泡排序 public class Bub ...

  5. Maven学习-构建项目

    创建项目 运行如下命令会创建一个简单的Maven项目. mvn archetype:create -DgroupId=com.netease.learn -DartifactId=simple -Dp ...

  6. 分布式Java应用与实践 (一)

    一) 分布式Java应用 1.1 基于消息方式实现系统间的通信 数据传输 TCP/IP 可靠的网络传输协议,首先给通信双方建立链接之后再进行数据传输,保证链接及数据传输的可靠,因此会牺牲一些性能 UD ...

  7. 将C-风格字符串用作string对象引用参数

    string类定义了一种char*到string的转换功能,这使得可以使用C-风格字符串来初始化string对象. 类型为const引用的形参其中一个属性表明:假设实参的参数类型与引用参数不匹配,但可 ...

  8. HTML5&CSS3读书笔记

    Hi All, 分享一下我学HTML5 摘抄的读书笔记(我用的还是英文,因为一些新的东西还是来自于欧美国家,希望大家习惯于看一些英文材料): 1. Difference between Section ...

  9. java 与操作系统同步问题（三）————父亲儿子女儿水果问题

    问题描述:父亲每次都会放一个水果在桌子上,女儿喜欢吃香蕉(只吃香蕉), 儿子喜欢吃苹果(只吃苹果).父亲每次只会随机往桌子上放一个水果(苹果或香蕉),儿子,女儿会来取.使用p.v操作来完成父亲.儿子. ...

  10. js循环给li绑定事件实现 点击li弹出其索引值 和内容

    代码如下: html代码 <ul> <li>房产</li> <li>家居</li> <li>二手房</li> < ...