CSS背景图像定位详解与实战教程

web前端开发课程：css背景模块-图像定位。

讲课人：波波老师。

background-color：背景颜色。background-image：背景图像。background-repeat：背景图像平铺。background-position：背景图像定位。background-attachment：背景图像是否固定。

当设置图片不平铺时，就必须要设置图片的定位了。background-position就是设置图像的定位，来看一下代码，看下位置。

·首先把图片的平铺属性改成不平铺。

·再把图片的background position设置成center，是居中对齐。它已经居中对齐了，垂直放也是居中对齐。

·现在有个问题，它的窗口距离比较短，把它的高度设置成100vh，这样可以跟窗口对齐。可以看到它是水平和垂直都举动对齐。

·这样把它的改一改改成top，这里改成right，就可以看到它在top和right，也就是上方和右方对齐。

·除了使用方向以外，还可以使用数值，比如100px，这里设成500px，可以看到它在水平100PX垂直500PX这里进行了对齐。

·同时还可以使用百分比，比如这里设成10%，这里设为50%，90%，可以看到它也针对父元素的百分比进行了对齐。