背景位置百分比不起作用

Question

我读到的每个地方都说这应该可以正常工作,但由于某种原因,它不是.

这是为了修复别人的问题所以修复它对我来说无关紧要,我只是想知道为什么.问题出在了.br .bg-image.我知道我正在尝试使用calc()但是使用简单background-position: 50%也不起作用.

http://jsfiddle.net/uLaa9fnu/2/

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

解决问题

经过一番摆弄后,我发现了造成这个问题的原因.background-position当背景与其包含的框架一样大(或更大)时停止工作.这也是dognose解决方案有效的原因.它删除了background-size.

作为证据,我已经更改了.br-frame 的CSS 以及.br .bg-image以下内容:

.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它按预期工作.

看小提琴

为什么呢

它不适用于百分比的原因是因为它background-position依赖于background-size字面意思.因为background-position: 0% 0%;在左上方,background-position: 100% 100%;在右下方.如果背景图像与包含框架一样大,则0%和100%之间没有更多差异.

结合使用这一理论calc(),它所做的就是:

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

在你的情况下,它向右,因为你right在你的前面加前缀calc().