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

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

15 голосов
/ 31 декабря 2008

Предположим, я устанавливаю фоновое изображение для веб-страницы в 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?

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

Спасибо!

Ответы [ 8 ]

6 голосов
/ 05 января 2009

Многослойные фоны являются частью рабочего проекта 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;
}
5 голосов
/ 08 января 2009

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

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

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

4 голосов
/ 31 декабря 2008

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

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

1 голос
/ 15 ноября 2010

В настоящее время это можно сделать во всех «современных» браузерах (не

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

  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.

0 голосов
/ 25 октября 2010

текст ссылки

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

0 голосов
/ 31 декабря 2008

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

html {
background: url(images/whatever.gif);
}
0 голосов
/ 31 декабря 2008

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

0 голосов
/ 31 декабря 2008

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

...