这是我参与8月更文挑战的第31天，活动详情查看：8月更文挑战
作者：battleKing
仓库：Github、CodePen
博客：CSDN、掘金
反馈邮箱：myh19970701@foxmail.com
特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权
背景
在学习 CSS 的过程中，大家肯定会遇到一个背景图片不知道 如何快速定位 的问题，但是大部分基础的 CSS 教程并没有提及如何解决这个问题，所以今天我们就通过这一篇文章快速解决这一问题。
相关知识
首先我们先来介绍一下 哪些 CSS 属性 与 背景图片 密切相关。
1. background-image 属性
background-image 属性是用来引入背景图片的。
background-image: url('https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/6bdafd801c878b10edb5fed5d00969e9.svg')
2. background-repeat 属性
background-repeat 属性是规定如何重复背景图像，一般设置为 no-repeat 。
- 可选值
值 | 描述 |
| --------- | --------------------- |
|
repeat| 默认。背景图像将在垂直方向和水平方向重复。 | |repeat-x| 背景图像将在水平方向重复。 | |repeat-y| 背景图像将在垂直方向重复。 | |no-repeat| 背景图像将仅显示一次。
background-repeat: no-repeat;
3. background-size 属性
background-size 属性规定背景图片的尺寸
- 可选值 值 | 描述 | | ------------ | ------------------------------------------------------------------- | | length | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。| | percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 | | cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 | | contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
3. background-position 属性
background-position 属性规定背景图像的位置
background-position 属性的三个属性值对应的就是背景图片定位的三种方法
-
关键字：
background-position: top right bottom left; -
像素：
background-position: 0px 0px; -
百分比：
background-position: 0% 0%;
关键字
background-position 后面的 top、right、bottom、left 表示的都是背景图片紧贴容器某条边。
最常见的是
background-position: top left;表示背景图片定位在容器的左上角
像素
background-position 后面的第一个 px 表示背景图片相对于容器左上角的水平方向偏移量，第二个 px 表示背景图片相对于容器左上角的竖直方向偏移量。
最常见的就是
background-position: 0px 0px;表示背景图片定位在容器的左上角
百分比
background-position 后面两个 x%，y% 表示背景图片本身相对于左上角水平方向偏移 x%，垂直方向偏移 y% 的点与背景图片的容器相对于左上角水平方向偏移 x%，垂直方向偏移 y% 的点重合对齐
假设
background-position: 20% 20%;
总结
background-position: 0px 0px;并不能根据窗口大小自适应。background-position: top left和background-position: x% y%的优势是背景图片可以根据窗口的大小，自动适应。- 所以我们应该
根据具体情况来选择哪一种方式来定位图片。
❤️ 感谢大家
如果本文对你有帮助，就点个赞支持下吧，你的「赞」是我创作的动力。
如果你喜欢这篇文章的话，可以「点赞」 + 「收藏」 + 「转发」 给更多朋友。
