Слои изображения в CSS - можно поместить 2 изображения в один элемент?

Предположим, что я устанавливаю фоновое изображение для веб-страницы в CSS следующим образом:

body    {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0; 
background: url(images/desk.gif) repeat bottom left;
}

Есть ли способ сложить второе изображение поверх desk.gif внутри самого элемента body или это единственный способ создать отдельный класс и использовать ось z?

Извините, это простой вопрос, но я пытаюсь понять это, и хотя я не смог заставить его работать, я также не нашел четкой слабой идеи в любом месте в Интернете... так, есть ли способ, или это просто не может сделать?

Спасибо!

Ответы

Ответ 1

Короче говоря, это невозможно. Вы можете сделать это, но вам нужно добавить второй объект HTML на страницу, чтобы заставить его работать. Так, например, поместите блок div прямо под вашим телом и назначьте второй фон этому объекту.

Надеюсь, это поможет!

Ответ 2

Слоистые слои являются частью рабочего проекта CSS3, но, насколько я знаю, поддержка для них ограничена WebKit/KHTML- таких как Safari, Chrome, Konqueror и OmniWeb.

Используя ваш пример кода, это будет выглядеть так:

body    {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: Verdana, Arial, Sans-Serif;
    background-color: #9D5922;
    color: #000;
    margin-left: auto;
    margin-right: auto;
    margin: 0;
    padding: 0; 
    background: url("images/top.gif") left bottom repeat,
                url("images/desk.gif") left bottom repeat;
}

Ответ 3

Я уже разместил решение по дублированному вопросу, но для тех, кому может потребоваться эта информация, я также отправлю его здесь.

Насколько мне известно, невозможно разместить его на одном уровне, но можно поместить несколько изображений в отдельный div поверх друг друга и был реализован на популярном веб-сайте тестирования юзабилити Silverback (проверьте фон, чтобы увидеть, как он был наложен). Если вы просмотрите исходный код, вы увидите, что фон состоит из нескольких изображений, расположенных поверх друг друга.

Вот статья, демонстрирующая, как сделать эффект, можно найти на Vitamin. Аналогичную концепцию обертывания этих слоев "луковой кожи" можно найти на A List Apart.

Ответ 4

В настоящее время это можно сделать во всех "современных" браузерах (не < IE9, afaik). Я могу подтвердить, что он работает в Firefox, Opera, Chrome. Нет причин не делать этого, если у вас есть достойное решение для старых браузеров /IE.

Для синтаксиса вы можете выбрать

  background:url(..) repeat-x left top,
             url(..) repeat-x left bottom;

и

  background-image:url(..), url(..);
  background-position:left top, left bottom;
  background-repeat:repeat-x;

Вам не нужны строки, но запятая важна.

Внимание! Следующее создаст два фонов, хотя вы указали только один URL-адрес изображения:

  background-image:url(..);
  background-position:top, bottom;

И, конечно, есть альтернатива использованию вложенных контейнеров, но это раздует ваш html.

Ответ 5

Единственный способ - использовать другой контейнер. Каждый элемент может содержать только одно фоновое изображение.

Ответ 6

Используйте абсолютное позиционирование и z-индекс, чтобы получить второй элемент сверху.

Ответ 7

Не забывайте, что вы можете применять стили к элементу HTML:

html {
background: url(images/whatever.gif);
}

Ответ 8

текст ссылки

Вышеупомянутая ссылка лучше всего описывает, что вы делаете...