背景知識：

background-size background-position

難題：

• background-size 為 100% 100% 時，background-position 部分失效；

示例

<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-size 為 100% 100% 時，background-position 通過 % 來調整時是無效的；

如果要調整，也不是沒有辦法，這裏先說為什麽 % 調整無效，看文檔 background-position：

<percentage> <percentage>
With a value pair of ‘0% 0%‘, the upper left corner of the image is aligned with the upper left corner of the box‘s padding edge. A value pair of ‘100% 100%‘ places the lower right corner of the image in the lower right corner of padding area. With a value pair of ‘14% 84%‘, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.

簡而言之：0% 0% 是把背景左上角與盒模型左上角對齊，100% 100% 是把背景右下角與盒模型右下角對齊，其他的%在上下限裏調整；

這意味著，規範規定了%作用的上下限，且用法和其他屬性的%不同。在這裏，background-size為100% 100% ，實際上，同時滿足了上限和下限，所以background-position等於失去了作用，這裏無效也就可以理解了。

方案

然而，這並不意味著，在這種情況下，我們就無法調整背景的位置了，可以不用 % 用 px 等 length ，效果如圖：

當然，這種做法的局限也比較明顯，不能自適應。

background-size:100% 100% 時 background-position: % 失效