2 части CSS "обои", которые изменяются в браузере

Ответ 1

Я успешно придумал два способа сделать это:

Метод 1

Нажмите здесь, чтобы посмотреть демонстрацию

Использование CSS3 background-size Я смог установить 2 div элементов друг на друга с помощью min-height: 50%, а затем с помощью background-size: 100% 50% они успешно выполнили то, что я ищу.

Этот метод был всего лишь доказательством концепции, поскольку IE6-8 не поддерживает background-size, я не преследовал эту настройку совершенно. Как бы то ни было, в настоящий момент это происходит, когда вы прокручиваете, несмотря на background-attachment: fixed;. Я бросил этот метод CSS3, чтобы искать лучшие методы с помощью трюков CSS...

Нажмите здесь, чтобы посмотреть демонстрацию

Следуя примерам, найденным в A List Apart (Article | Пример1 | Пример2). Я использовал Technique # 2 из примера 1, и мне удалось подражать тому, что я хотел сделать, используя только CSS2. (Я не уверен на 100%, как и почему это работает, но это так)

Потому что я также собираюсь использовать CSS3PIE, чтобы дать IE6-8 CSS3 возможность делать linear gradients, border-radius и box-shadow; Я решил использовать линейный градиент вместо изображения для верхнего фона.

Проблемы

• Метод CSS2 из методики # 2, пример 1 не работает с IE6 правильно
• Создает чрезмерное отставание во всех существующих Internet Explorer

Ответ 2

Это можно сделать только с помощью CSS. Не требуется никаких PIE. Просто ошибка IE6 и магия фильтров.

Демо: http://www.bundyo.org/test/FPB.html

Ответ 3

Сделайте это, используя raphaeljs. Создайте фон DIV, который станет холстом, нарисуйте rect до 50% высоты страницы (при использовании jquery затем используйте $(window).resize() для мониторинга изменения размера окна и $(window).height(), чтобы получить 50% в пикселях).

Вы можете заполнить формулу raphealjs rect, указав ее значение заливки на что-то вроде fill: "90-#000000-#ffffff"

Что касается изображения: Поместите изображение с помощью raphealjs image Или просто вставьте его с помощью HTML и обновите его по высоте с помощью jquery, как указано выше.

Я сделал что-то подобное недавно, используя около 10 строк кода.

Также: измените ваш water.png, около 275kb, где, как следующий самый большой файл на вашей странице (css), похож на 1.5kb.

Ответ 4

Если вы хотите сохранить горизонт воды на 50% на экране, я бы предложил более простой способ:

Создайте изображение (возможно, шириной около 1280) в Photoshop на дне и градиенте сверху. Утяните верхний градиент в сплошной голубой (например, # 68b). Утенок слева, справа и снизу изображения в тот же сплошной цвет (# 68b).

Установите фон своей страницы следующим образом:

html {
background: #68b url(waterimage.png) center center no-repeat;
}

В вашем случае вы, вероятно, захотите применить фон к #wdth-100 вместо html, но все зависит от того, на какой элемент вы хотите поместить свой фон.

Все сделано. Сообщите мне, если это сработает для вас.

Ответ 5

У меня нет ссылки на ваш верхний образ, поэтому я использовал одно и то же изображение сверху и снизу. Вероятно, вы должны использовать решение CSS для обычных браузеров и JS для IE.

<script type='text/javascript'>

$(document).ready(function() {
    wh=$(window).height();
    ww=$(window).width();
    if(wh%2) {
        h1=Math.round(wh/2);
        h2=Math.round(wh/2)-1;
    } else {
        h1=h2=wh/2;
    }
    img1=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img1'} )
            .css({'width':ww,'height':h1,'top':'0','left':'0','position':'absolute','z-index':'-100'});
    img2=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img2'} )
            .css({'width':ww,'height':h2,'top':h1,'left':'0','position':'absolute','z-index':'-100'});


    $(document.body).append(img1);
    $(document.body).append(img2);
});
$(window).resize(function() {
    wh=$(window).height();
    ww=$(window).width();
    if(wh%2) {
        h1=Math.round(wh/2);
        h2=Math.round(wh/2)-1;
    } else {
        h1=h2=wh/2;
    }
    $('#img1').css({'width':ww,'height':h1,'top':'0','left':'0'});
    $('#img2').css({'width':ww,'height':h2,'top':h1,'left':'0'});
});
</script>

Ответ 6

Прагматичный ответ, казалось бы, должен был бы сделать это, используя несколько div с собственным фоном, все из которых были бы расположены абсолютно и позади всего остального, используя z-index.

Я знаю, что не чистое решение разметки с одним div с каким-то волшебным CSS, но это сложная проблема в чистом CSS в любом браузере и почти наверняка невозможна, если вам нужно поддерживать IE6.

Еще более прагматичный ответ заключался бы в том, чтобы сказать: "Я буду поддерживать IE6 насколько могу, но если он не сможет поддержать мой прекрасный фоновый эффект, тогда это просто тяжелая удача для тех, кто все еще использует его".