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

固然，这种作法的局限也比较明显，不能自适应。