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

Мой дизайнер считает, что этого не может быть сделано, однако это кажется мне возможным. (Хотя у меня ограниченный опыт CSS). Однако он также сказал, что фон не может быть исправлен, и stackoverflow доказал свою ошибку в прошлом; поэтому я сомневаюсь в его знаниях.

JQuery можно использовать, если это невозможно сделать в чистом CSS.

Верхняя половина будет градиентом, который обладает полным гибким наклоном влево, вправо, вверх, вниз без значительных искажений. Нижняя половина - это изображение, которое идеально подходит для разрешения 1280 x 1024 (так как это наиболее популярное разрешение экрана браузера). Затем, в зависимости от требуемых требований, он будет набросать и исказить любой размер, который ему нужен. Все еще разрешено видеть все изображение.

Рацион между верхней половиной и нижней половиной всегда 50% 50% независимо от разрешения браузера.

Мне также хотелось бы, чтобы исправлены как верхняя, так и нижняя части.

В идеальном мире (без IE) id хотел бы сделать это с градиентами css3 и несколькими фонами в 1 DIV. Однако, поскольку IE9 еще не вышел, я думаю, что лучший способ приблизиться к нему - это 2 divs в контейнере DIV и использование повторного фона PNG для верхнего div.

Следует отметить, что я собираюсь использовать css3pie.com, чтобы разрешить некоторый CSS3 для IE6-8 (но я не хочу полагаться на него, если не доказано 100%)

Возможно ли это с помощью только CSS? Как вы это сделаете?

Если это невозможно с помощью только CSS, есть ли способ, с помощью которого я могу использовать JavaScript/JQuery? Я думаю, что база 1280 x 1024 не самая лучшая идея, потому что у нее, похоже, есть нечетное радио.

Edit 1

О да, у меня тоже есть WIP: http://meyers.ipalaces.org/ extra/

Он выглядит неплохо в 1280 x 1024... теперь он просто получает все изменения размера верхнего DIV на 50%, поэтому изображение составляет 50%.

Мне все равно понравится ВСЕ вода, потому что мне нравится внешний вид скал внизу. Тем не менее, я открыт для альтернативных идей, которые не достигают того, что я хочу на 100%, но приближаюсь.

Edit 2

Как использовать верхний градиент в качестве истинного фона CSS2, а затем просто поместить <img> в нижней части его, чтобы изменить размер? Возможно, это позволит использовать CSS2. Я здесь ссылаюсь на некоторые методы работы: Список в отдельности

Edit 3

Я все еще ищу результаты, которые работают на IE6, а также не заставляют Internet Explorer отставать. Я задаю щедрость 50, чтобы привлечь больше внимания.

Ответ 1

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

Метод 1

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

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

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

Метод 2

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

Следуя примерам, найденным в 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 насколько могу, но если он не сможет поддержать мой прекрасный фоновый эффект, тогда это просто тяжелая удача для тех, кто все еще использует его".