2015-10-08 3 views
0

Точно, если у нас есть блок с его высотой более, чем высота окна просмотра:Каков размер фонового изображения с приложением: исправлено; и размер: обложка ;?

.foo { 
    height: 110vh; 
    background-attachment: fixed; 
    background-size: cover; 
    ... 
} 

Является ли его фоновое изображение с attachment: fixed и size: cover; собирается принять всю высоту элемента.foo ИЛИ viewport?

+0

сделать это и проверить его –

+0

Вы знаете какой-либо способ, чтобы увидеть размер фонового изображения в консоли? – sdvnksv

ответ

1

просто проверить его в jsfiddle

Очевидно, что внутренний .foo DIV выходит за пределы высоты тела. Обратите внимание, что даже с телом, установленным для переполнения: hidden, .foo div по-прежнему выходит за пределы тега body.

Я также проверил на симуляторе устройства для хрома, поставив тег тела на 100vh и изображение до 120vh, увидев here.

body { 
 
    height: 30vh; 
 
} 
 
.foo { 
 
    background: url("http://orig15.deviantart.net/1c5c/f/2009/109/0/5/sample_background_5_by_hiagain69.jpg"); 
 
    height: 60vh; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
}
<div class="foo"></div>

+0

Спасибо за ваш ответ и пример. Но все же, если вы установили высоту .foo на 110vh; и переместите его фоновое положение на 10vh вверх, вы увидите повторение изображения. Таким образом, в окне просмотра отображается фоновое изображение: http://jsfiddle.net/vqa0bxv4/1/. – sdvnksv

+0

Это потому, что ваше фоновое изображение прилагается. независимо от размера изображения, это свойство не позволит масштабировать изображения вверх. Какой смысл перемещать фоновое положение до 10vh? –

+0

Я пытаюсь создать своего рода фон параллакса, который меняет положение фонового изображения при прокрутке элемента. Все работает нормально, за исключением случаев, когда высота элемента больше, чем высота видового экрана. Вот почему я пришел к выводу, что bg-образ на самом деле является размером окна просмотра, а не элементом. – sdvnksv