background | 不是第一

background-repeat:repeat-x;
background-position: 0 -600px;

.caption {
  padding: 0.5em 1em;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(4px); /**磨砂玻璃效果 */
  background-color: rgba(255, 255, 255, 0.5);
}

body {
    /* 加载背景图 */
    background-image: url(images/bg.jpg);
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
    background-attachment: fixed;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    /* 设置背景颜色，背景图加载过程中会显示背景色 */
    background-color: #464646;
}

background-repeat

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。
inherit	规定应该从父元素继承 background-repeat 属性的设置。

背景案例

   <style>
        * {
            padding: 0;
            margin: 0;
        }
        .shell{
            width: 100%;
            height: 100vh;
        }
        .img{
            width: 100%;
            height: 100%;
            background-image: url('./img.jpg');
            background-repeat:repeat-x;
            background-position: 0 -600px;
        }
    </style>
</head>
<body>
    <div class="shell">
        <div class="img"></div>
    </div>
    <script>
        const img = document.querySelector('.img')
        img.addEventListener('mouseenter',function(e){
            this.x=e.clientX
            this.y=e.clientY
        })
        img.addEventListener('mousemove',function(e){
            this._x=e.clientX
            this._y=e.clientY
            const disx = this._x-this.x
            const disy = this._y-this.y
            const movex = disx*2
            const movey = -600+disy/1.6
            img.style.backgroundPosition=`${movex}px ${movey}px`
        })
    </script>
	
</body>

background-position

值	描述
left top	如果仅指定一个关键字，其他值将会是"center"
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

background-position:left top;

背景图片的左上角和容器(container)的左上角对齐，超出的部分隐藏。

等同于 background-position:0,0;

也等同于background-position:0%,0%;

background-position:right bottom;

背景图片的右下角和容器(container)的右下角对齐，超出的部分隐藏。

等同于background-positon:100%,100%;

也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器(container)的高度-背景图片的高度

background-position:500px 15px；

背景图片从容器(container)左上角的地方向右移500px,向下移15px，超出的部分隐藏。

background-position:-500px -15px;

背景图片从容器(container)左上角的地方向左移500px，向上移15px，超出的部分隐藏。

background-position:50% 50%;这句经常让新手出错！

等同于 left：{ 容器(container)的宽度 — 背景图片的宽度 }*left  百分比，超出的部分隐藏。

等同于 right：{容器(container)的高度—背景图片的高度}*right百分比，超出的部分隐藏。
 
例如：background-position:50% 50%;就是background-position:(1000-2000)*50%px,(500-30)*50%px;即background- position:-500px,235px;也就是背景图片从容器(container)的左上角向左移500px，向下移235px；

（这种情况背景图片应该用bg2.jpg才能看出效果,bg.jpg的高度太小效果不明显）

background-position:-50% -50%;

等同于left：-{   {容器(container)的宽度—背景图片的宽度}*left百分比（百分比都取正值）}，超出的部分隐藏。

等同于right：-{   {容器(container)的高度—背景图片的高度}*right百分比（百分比都取正值）}，超出的部分隐藏。

例如：

background-position:-50% -50%;

就是

background-position:-{(1000-500)*50%}px,-{(500-360)*50%}px;

/* 即 */
 background- position:-250px,-70px;

也就是背景图片从容器(container)的左上角向左移250px，向上移70px；

background-attachment

值	描述
scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。
initial	设置该属性的默认值。
inherit	指定 background-attachment 的设置应该从父元素继承。

# background-repeat

# 背景案例

# background-position

# background-attachment

background-repeat

背景案例

background-position

background-attachment