背景图片

background-repeat

设置背景重复方式
repeat x轴、y轴双向重复
repeat-x x轴重复
repeat-y y轴重复
no-repeat 不重复

background-position

设置背景图片位置
background-position
通过left right top bottom center来设置，
使用方位时必须同时指定两个值，若只写一个，另一个默认center
通过偏移量来设置
x: y:

<style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            background-image: url('./img/1.jpg');
            /* background-repeat 设置背景重复方式*/
            background-repeat: no-repeat;
            /* background-position 设置背景图片位置 */
            /* background-position: center; */
            background-position: 100px 100px;
        }
</style>
<div class="box1"></div>

background-clip background-origin background-size

设置背景的范围
background-clip
border-box 默认值，背景出现在边框下边
padding-box 背景不会出现在边框，只出现在内容区和内边距
content-box 背景只会出现在内容区

background-origin
padding-box 默认值 background-position从内边距开始计算
content-box 从内容区计算
border-box 从边框处开始计算

background-size设置图片大小
第一个值：宽度，第二个值：高度
若只写一个，第二个默认auto
cover 比例不变，铺满
contain 比例不变，图片完整显示

background-attachment设置背景图是否跟随滚动
scroll 背景图跟随滚动
fixed 背景图不跟着滚动

background简写
注意
background-size必须在background-position后边，并且/隔开
background-position/background-size
background-origin background-clip两个样式，origin必须在clip前边

14.png

<style>
        .box2{
            margin-top: 20px;
            width: 400px;
            height: 400px;
            /* 超出后，出现滚动条 */
            overflow: scroll;
            background-color: cyan;
            background-image: url('./img/2.jpg');
            background-repeat: no-repeat;
            background-position: 0 0;
            border: 10px double red;
            /* 设置背景的范围
                 background-clip
                     border-box 默认值，背景出现在边框下边
                     padding-box 背景不会出现在边框，只出现在内容区和内边距
                     content-box 背景只会出现在内容区
                background-origin
                     padding-box 默认值 background-position从内边距开始计算
                     content-box 从内容区计算
                     border-box 从边框处开始计算
             */
            background-clip: content-box;
            background-origin: border-box;
            /* 
                 background-size 设置图片大小
                     第一个值：宽度，第二个值：高度
                         若只写一个，第二个默认auto
                    cover 比例不变，铺满
                    contain 比例不变，图片完整显示
             */
            background-size: contain;
        }

        .box3{
            width: 300px;
            height: 1000px;
            background-color: moccasin;
            background-image: url('./img/1.jpg');
            background-repeat: no-repeat;
            /* background-position: 80px 120px; */
            /*
            background-attachment 设置背景图是否跟随滚动
                 scroll 背景图跟随滚动
                 fixed  背景图不跟着滚动
             */
            background-attachment: fixed;
        }
    </style>
 <div class="box2">
     <div class="box3">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae architecto, quaerat commodi debitis nulla nam consectetur ducimus doloribus corporis illo ab cum voluptates sed excepturi facilis deleniti quasi ad maxime!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat nulla velit delectus veniam earum similique cupiditate quis quasi ipsum harum sed, minus repellendus molestiae incidunt voluptatem perferendis consectetur aut nihil!
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, esse minima vel error consequuntur, harum dolor eum cumque maxime earum placeat natus obcaecati architecto fugit quod consequatur atque dolore ipsa.
     </div>
   </div>