Разделение на уровни изображений в CSS - возможный поместить 2 изображения в тот же элемент?
6 ответов
Короче говоря, это не возможно. Можно сделать это, но необходимо добавить второй объект HTML к странице, чтобы заставить это работать. Так, например, место блок отделения прямо ниже Вашего тела, и присваивает вторые предпосылки к тому объекту.
Hope это помогает!
Не забывайте, что можно применить стили к элементу HTML:
html {
background: url(images/whatever.gif);
}
Используйте абсолютное расположение и z-индекс для получения второго элемента на вершине.
Многоуровневые фоны являются частью CSS3, Работающий Проект , но, насколько я знаю, поддержка их ограничена браузерами WebKit/KHTML-based, такими как 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;
}
Единственный путь состоит в том, чтобы использовать другой контейнер. Каждый элемент может содержать только одно фоновое изображение.
Я уже отправил решение в дублирующемся вопросе, но для любого, который может запросить эту информацию, я отправлю его здесь также.
Насколько я знаю, что не возможно поместить его в тот же слой, но это возможно поместить несколько изображений в отдельное отделение друг сверху друга и было реализовано популярным веб-сайтом тестирования удобства пользования Silverback (проверьте фон, чтобы видеть, как это было разделено на уровни). При просмотре исходного кода, Вы видите, что фон составлен из нескольких изображений, помещенных друг сверху друга.
Вот статья, демонстрирующая, как сделать, эффект может быть найден на Витамин . Подобное понятие для обертывания этих слоев 'луковой шелухи' может быть найдено на Список А Независимо .