background-position属性生效，背景却没有移动

最新推荐文章于 2023-06-08 18:08:02 发布

原创最新推荐文章于 2023-06-08 18:08:02 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #position

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析CSS中的background-position属性，探讨如何精确控制背景图片在容器内的位置。通过实例演示，解决背景图片不随属性变化的问题，揭示背景尺寸与容器大小匹配时的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css样式中有个background-position背景属性，是关于对背景在对象中的精准定位。
1. background-position: 水平方位垂直方位（right left top bottom center）
2. background-position-x: 水平方向移动
3. background-position-y:垂直方向移动
4. 结合一起来，一个容器里正方向上就有9个方位可选择。
重点来了，是背景在容器中的方位变化，当你的背景和你的容器一般大的时候，你的定位根本就不会变，这次我就出现了这样的问题。

<style type="text/css">
			#banner{
				background-image:url(file.jpg);
				background-repeat: no-repeat;
				background-position:right bottom;
			}
		</style>
	</head>
	<body>
		<div id="banner"></div>
	</body>