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

CSS3学习系列之背景相关样式（一）

2024-10-14 10:38:02   220人阅读

  • 新增属性：

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


联系
我们