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

Question

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

0

Я работаю над веб-сайтом, который подходит для одной страницы и прокручивается до других разделов, которые будут действовать как другие страницы. Id нравится иметь целевую страницу, которая представляет собой динамически настроечное изображение, которое займет всю страницу пользователя при входе. Мне удалось заставить изображение работать, но я не смог прокрутить страницу до другого контента.

.full-size {
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    overflow:hidden;
}
.page-welcome{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #292929 url(http://placekitten.com/1600/900) repeat fixed;
    background-size: cover;  
    }

Heres css, который я использую.

Я также создал и пример в jsfiddle ЗДЕСЬ Обратите внимание, что "Тест" должен быть центрирован, должен быть скопирован неправильно или somthing.

user3311827 15 фев. 2014, в 05:07

Источник

0

Вы пробовали background: #292929 url(http://placekitten.com/1600/900) repeat scroll; ?
Michael Zalla 15 фев. 2014, в 03:28
0

Да, попробовал без удачи
user3311827 15 фев. 2014, в 03:30
0

Уже поздно, поэтому я могу неправильно понять ваш вопрос, но вы пробовали добавить overflow:auto; в ваш .page-welcome , а затем установить на margin-top значение 100%? Я сделал эту скрипку здесь , дайте мне знать, если она выполняет то, что вы хотели
Elle 15 фев. 2014, в 05:38
0

@Elle На самом деле время объясняет это не сюрпризами. Я играл с его скрипкой, вы прокомментировали, я не обновил свою страницу, поэтому я пропустил ваш комментарий. В любом случае я удалил ответ, поставь цель :)
AtanuCSE 15 фев. 2014, в 06:00
0

@AtanuCSE, тебе не нужно было удалять свой ответ, я тебе поверил. Идите и положите его обратно, это нормально. :)
Elle 15 фев. 2014, в 06:05
0

Вам нужно будет использовать javascript для расчета размера области просмотра, а затем задать размер каждой «страницы» вашей общей страницы.
DA. 15 фев. 2014, в 06:11
0

@ user3311827, ты уже успел проверить мое предложение?
Elle 16 фев. 2014, в 00:04

Показать ещё 5 комментариев

Теги:

javascript

jquery

html

css

asp.net-mvc

1 ответ

Ещё вопросы

Вы пробовали background: #292929 url(http://placekitten.com/1600/900) repeat scroll; ?
Уже поздно, поэтому я могу неправильно понять ваш вопрос, но вы пробовали добавить overflow:auto; в ваш .page-welcome , а затем установить на margin-top значение 100%? Я сделал эту скрипку здесь , дайте мне знать, если она выполняет то, что вы хотели
@Elle На самом деле время объясняет это не сюрпризами. Я играл с его скрипкой, вы прокомментировали, я не обновил свою страницу, поэтому я пропустил ваш комментарий. В любом случае я удалил ответ, поставь цель :)
@AtanuCSE, тебе не нужно было удалять свой ответ, я тебе поверил. Идите и положите его обратно, это нормально. :)
Вам нужно будет использовать javascript для расчета размера области просмотра, а затем задать размер каждой «страницы» вашей общей страницы.
@ user3311827, ты уже успел проверить мое предложение?

Elle · Answer 1 · 2014-02-17T17-04-00.000Z

Просто чтобы увеличить мой комментарий: добавление margin-top:100%; к телу, который вы хотите нажать, должен дать желаемые результаты. См. Ссылку ниже, я добавил div именем "test" с этим свойством и, похоже, выполняет то, что вы хотели.

http://jsfiddle.net/tm2v6/13/embedded/result/