css之background属性总结

background 一个集成属性，按照书写的顺序：包含以下子属性：

background-image：指定元素使用的背景图像。可以是图片路径或使用渐变创建的“背景图像”
background-position: 指定背景图像在元素中出现的位置。
background-size: 指定背景图像尺寸。
background-repeat: 指定背景图像如何填充。
background-attachment: 定义滚动时背景图像相对于谁固定。
background-origin: 指定背景图像从元素的哪个区域作为显示的原点。
background-clip: 指定背景图像向外裁剪的区域。
background-color: 指定背景颜色。

background-image

属性值：使用绝对或相对地址指或者创建渐变色来确定图像
说明：在同一组背景定义中，如果背景颜色和背景图像都设置了，那么背景图像会覆盖在背景颜色之上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   html, body {
        height: 100%;
    }
    /* 在同一组背景定义中，如果背景颜色和背景图像都设置了，那么背景图像会覆盖在背景颜色之上 */
    .image {
        width:500px;
        height: 500px;
        background-image: url(./img/dog.jpg);
        background-repeat: no-repeat;
        background-color: red;
    }
    /* 使用绝对或相对地址指或者创建渐变色来确定图像 */
    .gradient {
        height: 100px;
        background-image: linear-gradient(to top, #45B5DA, #0382AD);
    }
    /* 组合使用例子 */
    .multi {
        height: 500px;
        background-image: url(./img/dog.jpg),
                      url(./img/dog2.jpg),
                      url(./img/dog3.jpg),
                      linear-gradient(to top, #45B5DA, #0382AD);
        background-repeat: no-repeat;
        background-position: 0 0,
                            500px 0,
                            1000px 0;    }
</style>
<body>
    <div class="image"></div>
    <hr>
    <div class="gradient"></div>
    <hr>
    <div class="multi"></div>
</body>
</html>

效果图：

background-image

background-position

属性值包含：

percentage : 用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
length : 用长度值指定背景图像在元素中出现的位置。可以为负值。
center: 背景图像水平垂直局中。
left: 背景图像从元素左边开始出现。
right: 背景图像从元素右边开始出现。
top :背景图像从元素顶部开始出现。
bottom: 背景图像从元素底部开始出现。

只接受1到4个参数值
例如：
1个param：
center;
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。
2个params：
left top;
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
3个params:
left bottom 10px;
4个params：
right 20px bottom 20px
注意：
如果提供三或四个，每个 <percentage> 或 <length> 偏移量之前都必须跟着一个边界关键字（即left | right | top | bottom，不包括center），偏移量相对关键字位置进行偏移。
假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px

background: url(test1.jpg) no-repeat right 20px bottom 20px;

background: url(test1.jpg) no-repeat left bottom 10px;

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。 */
        .position1 {
            border: 1px solid #000;
            width: 1000px;
            height: 350px;
            background-image: url(../img/dog.jpg);
            background-repeat: no-repeat;
            /* background-position: center; */
            background-position: 10%;
        }   
        .position2 {
            border: 1px solid #000;
            width: 1000px;
            height: 350px;
            background-image: url(../img/dog.jpg);
            background-repeat: no-repeat;
            background-position: 40px 50px;
        }
        .position3 {
            border: 1px solid #000;
            width: 1000px;
            height: 350px;
            background-image: url(../img/dog.jpg);
            background-repeat: no-repeat;
            background-position: left bottom 20px;
        }
        .position4 {
            border: 1px solid #000;
            width: 1000px;
            height: 350px;
            background-image: url(../img/dog.jpg);
            background-repeat: no-repeat;
            background-position: top 20px left 100px;
        }   
       
        
    </style>
</head> 
<body>
    <div class="position1"></div>
    <hr>
    <div class="position2"></div>
    <hr>
    <div class="position3"></div>
    <hr>
    <div class="position4"></div>
</body>
</html>

效果图：

background-position.png

background-size

属性值：

length: 用长度值指定背景图像大小。不允许负值。
percentage: 用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。我的理解就是width或height有任何一个属性如果没有覆盖到容器范围，就会放大，另一个也跟谁着等比例放大。可能会超过图片的范围。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。我的理解就是，width或height，有任何一个属性超出了容器的范围，就会等比缩小，直到图片完全包含在容器内。

该属性只能接受1-2个参数：

1param:
1: cover 或者 contain（只接受一个）
2: 只提供一个具体的值（length/percentage），该值用于定义背景图像的宽度，高度将依据图像宽度定义进行等比缩放计算得到。
2params : 50% 50%, 如果提供两个，第一个用于定义背景图像宽度，第二个定义高度；

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            border:1px dashed #666;
            width:400px;
            height:350px;
            background:url(../img/dog3.jpg) no-repeat;}
        .cover p {
            background-size:cover;
        }
        .contain p { 
            background-size:contain;
        }
        .length p {
            background-size:100px 140px;
        }
        .percentage p {
            background-size: 50% 30%;
        }
    </style>
</head>
<body>
    <ul class="test">
        <li class="cover">
            <h2>cover</h2>
            <p>将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。</p>
        </li>
        <li class="contain">
            <h2>contain</h2>
            <p>将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。</p>
        </li>
        <li class="length">
            <h2>length</h2>
            <p>自定义背景图像大小</p>
        </li>
        <li class="percentage">
            <h2>percentage</h2>
            <p>自定义背景图像大小</p>
        </li>
    </ul>
</body>
</html>

效果如下：

background-position.png

background-repeat

属性值：

repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺
repeat：背景图像在横向和纵向平铺
no-repeat：背景图像不平铺
round：当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3）
space: 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（CSS3）

该属性接受1-2个参数：

如果提供两个参数值，第一个用于横向，第二个用于纵向；
提供一个，则同时应用于横向与纵向，特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
   .repeat-x {
       width: 2500px;
       height: 350px;
       background-image: url(../img/dog.jpg);
       background-repeat: repeat-x;
   }
   .repeat-y {
       width: 400px;
       height: 750px;
       background-image: url(../img/dog.jpg);
       background-repeat: repeat-y;
   }
   .repeat {
       width: 2000px;
       height: 400px;
       background-image: url(../img/dog.jpg);
       background-repeat: repeat;
   }
   .round {
       width: 2000px;
       height: 800px;
       background-image: url(../img/dog.jpg);
       background-repeat: round;
   }
   .space {
       width: 2000px;
       height: 700px;
       background-image: url(../img/dog.jpg);
       background-repeat: space;
       background-color: red;
   }
   </style>
</head>
<body>
   <div class="repeat-x">横向平铺背景图片</div>
   <hr>
   <div class="repeat-y">纵向平铺背景图片</div>
   <hr>
   <div class="repeat">平铺背景图片</div>
   <hr>
   <div class="round">背景图像不能以整数次平铺时，会根据情况缩放图像</div>
   <hr>
   <div class="space">当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围</div>
</body>
</html>

效果图：

background-attachment

属性值：

fixed 背景图像相对于视口（viewport）固定。
scroll 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 350px;
            width: 1000px;
            background-image: url(../img/dog.jpg);
            background-repeat: no-repeat;
            background-position: 10% 10%;
            background-attachment: local;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <div>
        <p>背景图像不随窗体内容滚动始终固定</p>
        <p>文字内容</p>
        <p>文字内容</p>
        <p>文字内容</p>
        <p>文字内容</p>
        <p>文字内容</p>
        <p>文字内容</p>
        <p>文字内容</p>
        <p>文字内容</p>
        <p>文字内容</p>
        <p>文字内容</p>
        <p>文字内容</p>
        <p>背景图像不随窗体内容滚动始终固定</p>
    </div>
    
</body>
</html>

效果图：

image.png

background-origin

属性值：

border-box：从border区域（含border）开始显示背景图像。
padding-box：从padding区域（含padding）开始显示背景图像
content-box：从content区域开始显示背景图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            border:10px dashed #666;
            width:400px;
            height:400px;
            padding:20px;
            background:url(../img/dog.jpg)  no-repeat;
            background-size: contain;
            background-color: #aaa;
        }
        .border-box p {
            background-origin:border-box;
        }
        .padding-box p {
            background-origin:padding-box;
        }
        .content-box p {
            background-origin:content-box;
        }
    </style>
</head>
<body>
    <ul>
        <li class="border-box">
            <h2>border-box</h2>
            <p>从border区域（含border）开始显示背景图像</p>
        </li>
        <li class="padding-box">
            <h2>padding-box</h2>
            <p>从padding区域（含padding）开始显示背景图像</p>
        </li>
        <li class="content-box">
            <h2>content-box</h2>
            <p>从content区域开始显示背景图像</p>
        </li>
    </ul>
</body>
</html>

效果图：

background-clip
默认值： border-box
属性值：

border-box：从border区域（含border）开始向外裁剪背景。
padding-box：从padding区域（含padding）开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        p {
            width:400px;
            height:200px;
            margin:0;
            padding:20px;
            border:20px dashed #666;
            background:url(../img/dog.jpg) no-repeat;
            background-origin:border-box;
            /* 背景颜色也会被剪裁 */
            background-color: #aaa ;
        }
        .border-box p {
            background-clip:border-box;
        }
        .padding-box p {
            background-clip:padding-box;
        }
        .content-box p {
            background-clip:content-box;
        }
        .text p { 
            width:100%;
            height:100%;
            background-repeat:repeat;
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
            font-weight:bold;
            font-size:120px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="border-box">
            <h2>border-box</h2>
            <p>从border区域（不含border）开始向外裁剪背景</p>
        </li>
        <li class="padding-box">
            <h2>padding-box</h2>
            <p>从padding区域（不含padding）开始向外裁剪背景</p>
        </li>
        <li class="content-box">
            <h2>content-box</h2>
            <p>从content区域开始向外裁剪背景</p>
        </li>
        <li class="text">
            <h2>text</h2>
            <p>从前景内容的形状作为裁剪区域向外裁剪背景</p>
        </li>
    </ul>
</body>
</html>

效果图：