背景位置百分比不起作用 [英] background-position percentage not working

问题描述

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

Everywhere I read says this should be working fine, but for some reason it's not.

这是为了解决其他人的问题，因此对我来说无关紧要，我只想知道为什么.问题出在.br .bg-image上.我知道我正在尝试使用calc()，但是使用简单的background-position: 50%也不起作用.

This was to fix someone else's issue so fixing it doesn't matter to me, I just want to know why. The problem is on .br .bg-image. I know I'm trying to use calc() but using a simple background-position: 50% doesn't work either.

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>

推荐答案

解决问题

经过一番摆弄之后，我发现了导致此问题的原因.当背景与其包含的框架一样大(或更大)时，background-position停止工作. 这也是为什么犬之鼻的解决方案有效的原因.它会删除background-size.

Solving the problem

After some fiddling I've found what is causing the issue. background-position stops working when the background is as big (or bigger) as the frame it contains. This is also why dognose's solution works. It removes the background-size.

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

As proof, I've changed the CSS of the .br-frame and .br .bg-image to the following:

.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正常工作.

This way the background-size doesn't equal the frame anymore, causing the background-position to work as it is supposed to.

请参见小提琴

之所以不能使用百分比，是因为background-position从字面上依赖于background-size.因为background-position: 0% 0%;在左上方，而background-position: 100% 100%;在右下方.如果背景图片与包含框架的图片一样大，则0％和100％之间没有更多区别.

The reason it doesn't work with percentages, is because the background-position depends on the background-size, literally. Because background-position: 0% 0%; is top left, and background-position: 100% 100%; is bottom right. If the background image is as big as it's containing frame, there is no more difference between 0% and 100%.

将此理论与calc()结合使用时，所做的只是:

Using this theory in combination with calc(), all it does is:

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

calc(100% - 340px - 30px) place it to the right (100%), which doesn't move it at all, then move it a total of 370px (-340px - 30px) to the left.

在您的情况下，它位于右侧，因为您在calc()之前添加了right前缀.

In your case it goes to the right, because you prefixed right before your calc().

这篇关于背景位置百分比不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！