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

背景知識：

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 ，效果如圖：

固然，這種作法的侷限也比較明顯，不能自適應。