background-процент позиции не работает

везде, где я читал говорит, что это должно работать нормально, но по какой-то причине это не так.

Это было, чтобы исправить чью-то проблему, чтобы исправить это не имеет значения для меня, я просто хочу знать, почему. Проблема в .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>
6
background-position css percentage

3 ответов

решение проблемы

после некоторой возни я нашел, что вызывает проблему. background-position перестает работать, когда фон такой же большой (или больше), как и фрейм, который он содержит. Именно поэтому решение dognose работает. Он удаляет background-size.

в качестве доказательства я изменил CSS .brи .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().

9

background-position

Initial value 0% 0%

см. размер фоновой области позиционирования минус размер фоновое изображение; размер относится к ширине для горизонтальных смещений и к высоте для вертикальных смещений

таким образом, любые различия в размере фонового изображения и размера элемента приветствуются и то, что делает фоновое позиционирование работать с процентами. Иначе нет.

пример:

рассмотрим изображение с размером 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>

документы

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/ (если это ваш expeted выход для нижнего правого кадра)

0