Размер фонового изображения не обновляется на фоновое вложение: неподвижные элементы

Ниже приведен пример: http://jsfiddle.net/MyDkR/8/Размер фонового изображения не обновляется на фоновое вложение: неподвижные элементы

Вот код:

.fixed { 
    height: 250px; 
    width: 250px; 
    background: #000 url('http://placekitten.com/200/600') no-repeat; 
    background-size: auto 100%; 
    background-attachment: fixed; 
} 

.notfixed { 
    height: 250px; 
    width: 250px; 
    background: #000 url('http://placekitten.com/200/600') no-repeat; 
    background-size: auto 100%; 
}

Верхний элемент не сохраняет свойство фонового размера , который заявляет, что высота фона будет равна высоте элемента.

Нижний элемент идентичен, за исключением того, что он не имеет привязки к фону: фиксированное правило.

Является ли это ошибкой рендеринга? Я тестировал его в последних версиях IE и Chrome. Если да, есть ли способ обновить размер фона?

источник

2013-08-22 drewblaisdell

Если я понимаю часть [MDN: background-size] (https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) правильно, это правильное поведение: 'If фоновая привязка фиксирована, а область фонового позиционирования - это вся область окна браузера, не включая область, охватываемую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются. Возможно, этот вопрос может быть полезен: http://stackoverflow.com/q/15713668/1960455 –

@ t.niese Опубликовать в качестве ответа. Чтобы увидеть эффект, вы можете изменить размер окна, его поведение точно так, как оно определено, чтобы вести себя. Также обратите внимание на возможные способы изменения размера фона для полного ответа –

^^ Если вы перемещаете/добавляете 'background-attachment: fixed' в элемент' .notfixed', вы увидите подобное поведение. Хороший способ лучше понять поведение - попробовать их в разных комбинациях, посмотреть, что они делают, затем вернуться и перечитать спецификации и/или документы MDN, а затем повторить. – dc5

Фон элемента, который имеет размер элемента, но фиксируется на экране, может быть эмулирован псевдоэлементом с «позицией: фиксированный». Но тогда проблема состоит в том, чтобы сделать элемент клипом этим псевдоэлементом, потому что overflow не влияет на дочерние элементы с фиксированной позицией. Единственным обходным решением (найдено in this Russian blog article), которое я знаю, является использование свойства CSS clip (для которого требуется абсолютная позиционная оболочка).

JSFiddle example

HTML:

<div class="fixed"><div></div></div>

УС:

.fixed { 
    height: 250px; 
    width: 250px; 
    position: relative; 
} 

.fixed > div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: inherit; 
    height: inherit; 
    clip: rect(0px, 250px, 250px, 0px); 
} 

.fixed > div::before { 
    content: ''; 
    position: fixed; 
    height: inherit; 
    width: inherit; 
    background: #000 url('http://placekitten.com/200/600') no-repeat; 
    background-size: auto 100%; 
    z-index: -1; 
}

Недостатком является необходимость установить значение для clip в длину блоков (не percantages), который может быть проблематичным если высота элемента должна быть действительно динамичной. В этом случае решение Henrique Feijo может быть более подходящим.

источник

2013-08-27 19:55:21

Если вы заинтересованы в яваскрипте версии, вы можете попробовать:

$(document).ready(function(){ 
    $('#smaller').click(function(){ 
     var oldHeight = $('.fixed').height(); 

     $('.fixed, .notfixed').css('height', oldHeight/1.25 +'px'); 
     $('.fixed').css("background-size", "auto " + $('.fixed').height() + "px") 
    }); 
});

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

источник

2013-08-27 16:48:47

Попробуйте здесь: http://jsfiddle.net/Sf6pW/ нажмите на кнопку уменьшить его –

Если вы хотите, чтобы уменьшить,

Просто нужно изменить 1 строки, под .fixed стиле

background: #000 url('http://placekitten.com/200/600') no-repeat 0 0;

это исправит положение.

и удалите эту строку

background-attachment: fixed;

это проблема

Это будет делать трюк,

Здесь я обновил fiddle

Примечание: Если вы ищете изображение оставаться в фиксированном размере и div должно уменьшаться, тогда есть другой способ.

Определение фона размер,

background-size: auto 250px;

Я обновил fiddle для этого тоже ..

Статический ключевое слово делает изображение статичным на месте в то время как изменение страницы масштабирования или прокрутки происходит. поэтому изображение останется на том месте.

Надеюсь, это прояснит ситуацию.

источник

2013-09-02 07:24:21 MarmiK

Размер фонового изображения не обновляется на фоновое вложение: неподвижные элементы

ответ

Смежные вопросы