• 新增属性：

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. 分享一个完整的Mybatis分页解决方案

    Mybatis 的物理分页是应用中的一个难点,特别是配合检索和排序功能叠加时更是如此. 我在最近的项目中开发了这个通用分页器,过程中参考了站内不少好文章,阅读源码帮助更大minglisoft.cn/t ...

  2. 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。

    一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...

  3. Django集成celery实战小项目

    上一篇已经介绍了celery的基本知识,本篇以一个小项目为例,详细说明django框架如何集成celery进行开发. 本系列文章的开发环境: window 7 + python2.7 + pychar ...

  4. 第 12 章 MySQL 可扩展设计的基本原则

    前言: 随着信息量的飞速增加,硬件设备的发展已经慢慢的无法跟上应用系统对处理能力的要求了.此时,我们如何来解决系统对性能的要求?只有一个办法,那就是通过改造系统的架构体系,提升系统的扩展能力,通过组合 ...

  5. 简单的用jQuery做遮罩效果

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

  6. 开篇有益-解析微软微服务架构eShopOnContainers（一）

    为了推广.Net Core,微软为我们提供了一个开源Demo-eShopOnContainers,这是一个使用Net Core框架开发的,跨平台(几乎涵盖了所有平台,windows.mac.linux ...

  7. Zepto源码分析-架构

    构造函数 Zepto.js 是专门为智能手机浏览器推出的javascript库, 拥有与和jQuery相似的语法. 它的优点是精简,压缩后5-10K. 不支持IE MIT开源协议 结构   http: ...

  8. div的替代品

    人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>--具体地说,就是直接用作替代品(用于样式).在XHTML或者HTML4中,我们常看到 ...

  9. div,css命名规范！

    命名规则说明: 1).所有的命名最好都小写 2).属性的值一定要用双引号("")括起来,且一定要有值如class="pcss5",id="pcss5& ...

  10. Linux安装JDK完整步骤

    1.检查一下系统中的jdk版本 [root@localhost software]# java -version 显示: openjdk version "1.8.0_102" O ...