• 新增属性：

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. Apache localhost和局域网ip地址访问

    今天忍无可忍重装了公司的电脑,所以把开发工具也都重新装一下. 安装wamp,localhost和局域网ip地址无法访问. 在C:\Windows\System32\drivers\etc\hosts文 ...

  2. BM25和Lucene Default Similarity比较 (原文标题：BM25 vs Lucene Default Similarity)

    原文链接: https://www.elastic.co/blog/found-bm-vs-lucene-default-similarity 原文 By Konrad Beiske 翻译 By 高家 ...

  3. 模板方法模式(Tempalte Method Pattern)

    模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式实现,然后声明一些抽象方法来迫使子类实现剩余的逻辑.不同的子类可以以不同的方式实现这些抽象方法,从而对剩余的逻辑有 ...

  4. 分享一个完整的Mybatis分页解决方案

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

  5. 自己实现的一个简单的EF框架（反射实现）

    我实现了一个简单的EF框架,主要用于操纵数据库.实现了对数据库的基本操纵--CRUD 这是项目结构 这是一个 core 下的 DLL 写了一个数据库工厂,用于执行sql语句.调用sql语句工厂 写了一 ...

  6. ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据的传递

    前言 最近公司项目进行架构调整,由原来的三层架构改进升级到微服务架构(准确的说是服务化,还没完全做到微的程度,颗粒度没那么细),遵循RESTFull规范,使前后端完全分离,实现大前端思想.由于是初次尝 ...

  7. 超声波 HC-SR04

    三.实验原理 1. 超声波传感器简介 超声波测距系统主要应用于汽车的倒车雷达.及机器人自动避障行走.建筑施工工地以及一些工业现场例如:液位.井深.管道长度等场合.超声波是一种在弹性介质中的机械振荡,有 ...

  8. CPU Affinity

    Reference: [1] http://www.linuxjournal.com/article/6799 Soft vs. Hard CPU Affinity There are two typ ...

  9. 关于Laravel中的artisan命令

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Helvetica; color: #454545 } p.p2 { margin: 0.0p ...

  10. Some 3D Graphics (rgl) for Classification with Splines and Logistic Regression (from The Elements of Statistical Learning)（转）

    This semester I'm teaching from Hastie, Tibshirani, and Friedman's book, The Elements of Statistical ...