背景位置百分比不起作用

Question

我读到的所有地方都说这应该可以正常工作，但由于某种原因，事实并非如此。

这是为了解决别人的问题，所以解决它对我来说并不重要，我只是想知道为什么。问题出在 .br .bg-image 上。我知道我正在尝试使用 calc() 但使用简单的 background-position: 50% 也不起作用。

html {
  height: 100%;
  width: 100%;
}
body {
  margin: 0px;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.bg-image {
  height: 600px;
  width: 800px;
  background-image: url('http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
}
.relative {
  position: relative;
}
.containeroverlay {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
}
.framesizer {
  height: 340px;
  width: 300px;
  overflow: hidden;
  position: absolute;
}
.frame {
  background-image: url('http://i.imgur.com/4AcIXsD.png');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 340px;
  width: 300px;
}
.tl {
  top: 30px;
  left: 30px;
}
.tl .bg-image {
  background-position: right 30px bottom 30px;
}
.br {
  top: calc(100% - 340px - 30px);
  /* Height of frame, plus 30px spacing */
  left: calc(100% - 300px - 30px);
  /* Width of frame, plus 30px spacing */
}
.br .bg-image {
  background-position: right calc(800px - 300px - 30px) bottom calc(600px - 340px - 30px);
  /* Background Position doesn't like percentages for some reason */
}

<div class="bg-image">
  <div class="containeroverlay relative">
    <div class="framesizer tl">
      <div class="bg-image">
        <div class="frame"></div>
      </div>
    </div>
    <div class="framesizer br">
      <div class="bg-image">
        <div class="frame"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

GEspinha 说的有点对。此示例如您所料工作：

.br .bg-image {
  background: url('http://media1.santabanta.com/full') 50% 50%;
}

虽然有这个 - 它不会工作。

.br .bg-image {
    background-position:50% 50%;
}

http://jsfiddle.net/gtj5p0px/（如果这是右下角帧的加速输出）

Answer 2

解决问题

经过一些摆弄，我找到了导致问题的原因。 background-position 当背景与其包含的框架一样大（或更大）时停止工作。这也是 dognose 的解决方案有效的原因。它删除了 background-size.

作为证明，我已将 .br 帧和 .br .bg-image 的 CSS 更改为以下内容：

.br {
    top:calc(100% - 340px - 30px);
    left:calc(100% - 300px - 30px);
}
.br .bg-image {
    background-position: calc(100% + 30px) calc(100% + 30px); 
    /* 100% puts it bottom right, + 30px offset from .br */
    background-position: right -30px bottom -30px;
    /* or simply use this */
    height: 100%;
    width: 100%;
    background-size: 800px 600px;
}

这样 background-size 就不再等于框架了，导致 background-position 正常工作。

见fiddle

原因

它不适用于百分比的原因是 background-position 从字面上看取决于 background-size。因为 background-position: 0% 0%; 是左上角，而 background-position: 100% 100%; 是右下角。如果背景图像与其包含的框架一样大，则 0% 和 100% 之间没有更多差异。

结合calc()使用这个理论，它所做的就是：

calc(100% - 340px - 30px) 将它放在右边 (100%)，根本不会移动它，然后将它总共向左移动 370px (-340px - 30px)。

在你的情况下，它向右移动，因为你在 calc().

之前添加了 right 前缀

Answer 3

`background-position`

Initial value 0% 0%

refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets

所以背景图像的大小和元素的大小有任何差异是受欢迎的，是什么让背景定位与百分比一起工作。否则他们不会。

示例：

考虑一张尺寸为 500X500 px;
的图像使用 background-position: 50% 50%;
如果您的 div 宽度为 600px;
您的背景图片将向右移动
50% * (600px - 500px) 即 50px
同样，如果 div 的高度为 700px，您的背景图像将向下移动
50% * (700px - 500px) 即 100px

div{
    background-image: url(https://i.imgur.com/gcnJ2Qi.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: solid grey;
    width: 600px;
    height:700px;
}

<div></div>

如果div比图片窄
现在你的 div 元素是 300X400 px，并且你想将你的背景图片定位为与之前相同的位置 (50px right and 100px down)
您需要指定负数 background-position: -25% -100%;
因为 -25% * (300-500) = 50px 和 -100% (400-500) = 100px

div{
    background-image: url(https://i.imgur.com/gcnJ2Qi.png);
    background-repeat: no-repeat;
    background-position: -25% -100%;
    border: solid grey;
    width: 300px;
    height:400px;
}

<div></div>

在div和图片大小相同的情况下：
您在 background-position 中指定的任何百分比都将乘以零。并且图像将始终与 div 的左上角对齐。要解决此问题，请通过重置 background-size:80% or 120%; 使图像变小或变大

div{
    background-image: url(https://i.imgur.com/gcnJ2Qi.png);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    border: solid grey;
    width: 500px;
    height:500px;
    background-size:80%;
}

<div></div>

The docs

背景位置百分比不起作用

background-position percentage not working

css

percentage

background-position

解决问题

原因

`background-position`

示例：