Вопросы Теги

фоновое положение не работает над родителем со 100% шириной и высотой? [Дубликат]

Как будто вы пытаетесь получить доступ к объекту, который является null. Рассмотрим ниже пример: 

TypeA objA;

. В это время вы только что объявили этот объект, но не инициализировали или не инициализировали. И всякий раз, когда вы пытаетесь получить доступ к каким-либо свойствам или методам в нем, он будет генерировать NullPointerException, что имеет смысл.

См. Также этот пример: 

String a = null;
System.out.println(a.toString()); // NullPointerException will be thrown
6
задан Jamie Barker 8 July 2015 в 12:07
поделиться

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
ответ дан Sander Koedood 18 August 2018 в 20:56
поделиться
  • 1
    Теперь я понимаю, что вызывает его (+1), однако теперь мне интересно, почему браузеры должны так себя вести ... Любые идеи? – Jamie Barker 8 July 2015 в 12:44
  • 2
    Посмотрев на это еще немного, я думаю, теперь, наконец, все это понял. Возможно, вы поймете, понимаете ли вы мое объяснение. – Sander Koedood 8 July 2015 в 13:27

GEspinha несколько прав. Этот пример работает так, как вы могли ожидать: 

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

, имея это - он не будет работать. 

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

http://jsfiddle.net/gtj5p0px/ (если это ваш выведенный вывод для нижнего правого кадра)

0
ответ дан dognose 18 August 2018 в 20:56
поделиться

background-position

Initial value 0% 0%

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

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

Пример:

Рассмотрим изображение с размером 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
ответ дан user10089632 18 August 2018 в 20:56
поделиться