CSS怎样固定背景图局部显示？background-position百分比-css教程-PHP中文网

CSS怎样固定背景图局部显示？background-position百分比

蓮花仙者

发布： 2025-08-23 14:04:01

原创

193人浏览过

要实现背景图只显示局部并固定位置，需通过background-position和background-size协同控制；具体步骤：1. 设置background-image指定目标图片；2. 使用background-repeat: no-repeat防止重复；3. 调整background-size大于容器尺寸以放大图片，从而实现局部“裁剪”效果；4. 利用background-position的百分比对齐机制，将图片上某一点与容器上某一点对齐，精确控制显示区域的位置，最终实现背景图局部固定显示的效果。

CSS怎样固定背景图局部显示？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%处）对齐。这听起来有点绕，但理解这个“对齐点”的概念是关键。

稿定抠图

AI自动消除图片背景

查看详情

具体步骤通常是这样：

立即学习“前端免费学习笔记（深入）”；

指定背景图：
```
background-image: url('your-large-image.jpg');
```
登录后复制
假设这是一张尺寸很大的图，你想从中截取一部分。
避免重复：
```
background-repeat: no-repeat;
```
登录后复制
几乎是标配，不然你的局部会重复填充。
调整尺寸以“裁剪”：
```
background-size
```
登录后复制
在这里非常重要。如果你想显示图片的一个小区域，通常需要让
```
background-size
```
登录后复制
的值大于容器的尺寸，这样图片就会溢出容器，然后你再用
```
background-position
```
登录后复制
来“移动”图片