问题见代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 800px;
height: 400px;
background: url("img/bg1.jpg") center center;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
问题：讲解中的图片比DIV小,挺好理解的，position的位置就是图片相对于盒子的位置。。但是如果图片比定义的DIV小呢，假设我这边插入的图片bg1.jpg的大小是宽2000，高600。那这边的位置偏移center，center感觉要变成盒子相对图片的位置，是这么理解的吗？
正在回答
你好同学，设置50% 50%与center center的情况是一样的，意思就是通过定位，让背景图的中心位置显示在盒子里面。那么既然规定的是让图片中心显示在盒子中间，肯定是让图片往左上角移动才能实现的，所以同学这里就不要按照px去理解了。
或者可以理解为和设置px移动方向是相反的，即50px 50px是让图片往左下角移动。而50% 50%或者center center是让图片往左上角移动，直到图片中心显示在盒子中。
祝学习愉快，望采纳。
你好同学，如下横线的地方是不是应该是如果图片比div大吧。
不管是图片比div大还是比div小，设置背景图定位，都是参照div进行移动的。
例如如下图片，里面包含了两个小图标，（后面阶段也会接触到这样一个图片有很多小图标的）
例如一个盒子引入这个背景图
因为背景图有两个图标，但是盒子设置的高度比图片小，只能显示出来一个。不设置背景定位的时候，默认从盒子的左上角开始显示：
使用背景定位去移动图片，在设置正值的情况下，例如0 10px,就是参照盒子左上角，往左移动0px ,往下移动10px：
此时第一个图标也只能显示一半了：
例如设置负值，那么就是参照盒子左上角往上移动，此时第二个图标就显示出来了。
例如设置center center，就可以理解为图片参照盒子左上角往上移，让图片的中心位置显示在盒子中。
祝学习愉快，望采纳。
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星