background-image处于div中间不拉伸

你可以使用CSS属性"background-position"和"background-size"来控制背景图像在div中的位置和大小。例如，将"background-position"设置为"center"，"background-size"设置为"cover"，可以使背景图像在div中间居中且不拉伸。

相关问题

background-image图片适应div

要让 background-image 图片适应 div 元素，可以使用 background-size 属性。将 background-size 设置为 cover，可以让图片完全覆盖 div 元素，但可能会导致图片被拉伸或裁剪。另一种方法是将 background-size 设置为 contain，这样可以让图片适应 div 元素的大小，但可能会在 div 元素周围留有空白。具体实现方法如下：

div {
  background-image: url('your-image-url');
  background-size: cover; /* 或者 contain */
  background-position: center;
  background-repeat: no-repeat;
}

background-position不生效

### CSS `background-position` 属性无效的原因

当 `background-size` 设置为 `100% 100%` 或者容器尺寸与背景图片尺寸完全一致时，计算位置偏移量会变得无意义。因为此时无论怎样调整百分比值，实际位移始终为零[^1]。

对于给定的 HTML 和 CSS 示例：

<div class="content">content</div>

.content {
    width: 200px;
    height: 200px;
    background-color: pink;
    background-image: url('https://xianshenglu.github.io/css/img-displayed/frosted-glass-tiger.jpg');
    background-position: 10% 10%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

上述代码中的 `background-position: 10% 10%;` 实际上不会产生任何视觉上的变化，原因是背景图像已经被拉伸至填充整个 `.content` 容器，使得定位参数失去了效果[^2]。

### 解决方案

为了使 `background-position` 生效，可以考虑以下几种方法之一：

#### 方法一：改变 `background-size` 的设定

通过减少背景图的比例，让其小于容器的实际尺寸，从而允许 `background-position` 发挥作用。例如：

.background-adjustment {
    ...
    background-size: contain; /* 自动适应 */
    /* 或者指定具体的宽度高度比例 */
    background-size: 80% auto;
}

这种方法可以让背景图保持一定比例的同时响应不同的屏幕分辨率，并且能够正常应用位置偏移。

#### 方法二：利用相对单位而非绝对覆盖

如果确实需要全屏显示但又希望保留一定的灵活性，可以选择不使用固定的百分比而是尝试其他类型的长度单位如视口单位（vw/vh），这样可以在不影响整体布局的前提下实现更灵活的位置控制。

#### 方法三：引入额外层结构

创建一个新的内部 div 来承载背景图案并适当调整内外 div 的关系也可以解决问题。比如在外围 div 上定义背景，在内嵌 div 中设置 padding 或 margin 达到类似的效果而不影响原有设计意图。

---