五十三：CSS3之背景与渐变之背景

一：背景图像区域：

background-clip：指定背景绘制区域

　　border-box：背景被剪裁到边框盒

　　padding-box：背景被剪裁到内边距框

　　content-box：背景被剪裁到内容框

content-box

padding-box

border-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;border: none}
        div{
            width: 400px;height: 200px;padding: 50px;border: 50px solid transparent;
            background: url("背景图.jpg") no-repeat center center;
            background-clip: border-box;
            /*background-clip: padding-box;*/
            /*background-clip: content-box;*/
        }
        span.div_border{position: absolute;top: 0;left: 0;width: 400px;height: 200px;padding: 50px;border: 50px solid rgba(255, 0, 0, .25);}
        span.div_padding{position: absolute;top: 50px;left: 50px;width: 400px;height: 200px;border: 50px solid rgba(255, 255, 0, .25);}
    </style>
</head>
<body>
    <div>
        <span class="div_border"></span>
        <span class="div_padding"></span>
    </div>
</body>
</html>