首页 > 代码库 > CSS3学习系列之背景相关样式(一)

CSS3学习系列之背景相关样式(一)

  • 新增属性:

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学习系列之背景相关样式(一)