html:
    代码：

    1. <!DOCTYPE html>
    2. <html lang="ch">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <link rel="stylesheet" href="../css/reset.css">
    8.     <link rel="stylesheet" href="../css/89尚硅谷_背景2.css">
    10. </head>
    11. <body>
    12.     <div class="box1"></div>
    13. </body>
    14. </html>

    css:
    （1）当对一个块元素设置border为double之后，设置background-clip: 有三个选项
    content-box 只覆盖内容区
    padding-box 只覆盖内边距和内容区
    border-box 覆盖所有区域
    （2）background-origin；设置开始位置
    content-box 从内容区开始为原点
    padding-box 从覆盖内边距开始为原点
    border-box 从border开始为原点
    （3） background-position; 有两个值 分别为控制横和竖， 取值范围为left center right top center bottom;
    或者查看zeal具体用法、
    （4）background-size;设置背景图片大小，具体查看zeal;

    代码：

    .box1 {
    width: 500px;
    height: 500px;
    background-color: #bfa;
    border: thick double black;
    margin: 100px auto;
    background-clip: content-box;
    background-image: url('../img/1.png');
    background-repeat: no-repeat;
    background-origin: content-box;
    background-position: center center;
    background-size: auto 100%;

}

    image.png