要实现背景图只显示局部并固定位置，需通过background-position和background-size协同控制；具体步骤：1. 设置background-image指定目标图片；2. 使用background-repeat: no-repeat防止重复；3. 调整background-size大于容器尺寸以放大图片，从而实现局部“裁剪”效果；4. 利用background-position的百分比对齐机制，将图片上某一点与容器上某一点对齐，精确控制显示区域的位置，最终实现背景图局部固定显示的效果。
css里想让背景图只显示某个局部，还想让它乖乖地待在那个位置，特别是用百分比来控制的时候，确实是个有点意思的话题。说白了，这事儿主要靠
background-position
和
background-size
联手，再辅以
background-repeat: no-repeat
来搞定。百分比在这里头扮演的角色，比你想象的要精妙一些，它不是简单地把图片挪动百分之多少，而是让图片的某个点和容器的某个点对齐。
解决方案
要实现背景图的局部显示并固定，核心在于精确控制
background-position
和
background-size
的协同。当
background-position
使用百分比时，它定义的是图片上的一个点与容器上的一个点如何对齐。举个例子，
background-position: 50% 50%;
并不是说把图片向右下移动50%，而是将图片的中心点（50% 50%处）与容器的中心点（也是50% 50%处）对齐。这听起来有点绕，但理解这个“对齐点”的概念是关键。
具体步骤通常是这样：
立即学习“前端免费学习笔记（深入）”；
- 指定背景图：
background-image: url('your-large-image.jpg');假设这是一张尺寸很大的图，你想从中截取一部分。
- 避免重复：
background-repeat: no-repeat;
几乎是标配，不然你的局部会重复填充。
- 调整尺寸以“裁剪”：
background-size
在这里非常重要。如果你想显示图片的一个小区域，通常需要让
background-size
的值大于容器的尺寸，这样图片就会溢出容器，然后你再用
background-position
来“移动”图片
评论（已关闭）
评论已关闭