一、背景设置

background-color:设置背景颜色
background-image：设置背景图片
- 两者可以同时设置
- 如果背景图片过小就会自动平铺
- 图片过大就会无法完全显示
- 如果两者一样大就可以正常显示
background-repeat 用来设置背景重复方式
可选值：
- repeat 默认值；
- repeat-x沿x方向重复
- repeat-y沿y方向重复
- no-repeat不重复
background-position设置背景图片的位置
可选值：top/bottom left/right、center
也可以通过偏移量来指定图片的位置。

设置背景图片的范围：

background-clip
可选值：
- border-box 默认值，背景会出现在边框的下边
- padding-box 背景不会出现在边框，只会出现在内容区和内边距
- content-box 背景只会出现在内容区
background-origin 背景图片的偏移量计算原点
- padding-box：默认值
- content-box：内容区
- border-box：边框处开始计算
background-size设置背景图片的大小
第一个值表示宽度：第二个值表示高度
如果只指定一个值的话，第二个按比例缩放
- cover：图片将元素铺满
- contain：比例不变图片在元素中完整显示
background-attachment:
- scroll默认值，背景图片是跟随元素移动。
-fixed 背景图片不跟随元素移动。
background 背景相关属性的所有设置
其中background-position/background-size

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <style>
        .box1{
            width: 500px;
            height: 500px;
            background-color:#bfa ;
            background-image: url("../photo/jd1.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>