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

StackOverflow https://stackoverflow.com/questions/402200

  •  03-07-2019
  •  | 
  •  

Вопрос

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

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

Спасибо!

Это было полезно?

Решение

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

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

Другие советы

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

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

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

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

В настоящее время это можно сделать во всех «современных» браузерах (не <IE9, афаик).Я могу подтвердить, что он работает в 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.

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

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

текст ссылки

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

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

html {
background: url(images/whatever.gif);
}
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top