Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > multiple background и новая картинка ?

Автор: neoks 7.6.2012, 15:41

Так вот вопрос, возможно ли сделать типа такого чтоб мона было другим классом добавить дополнительную картинку к фону
Например

Код


.examplemultiplebackgrounds {
    background-image: url("http://www.css3.info/wp-content/themes/new_css3/img/sheep.png");
    background-position: center bottom, left top;
    background-repeat: no-repeat;
    height: 250px;
    padding: 5px;
    width: 500px;
}
.der {
    background: inherit url("http://www.css3.info/wp-content/themes/new_css3/img/betweengrassandsky.png"); например тут добавить еше одну картинку на фон
    background-position: inherit, left top;
    height: 250px;
    padding: 5px;
    width: 500px;
}

Код


<div class="examplemultiplebackgrounds der">
<p>This box has two background images, the first a sheep (aligned to the bottom and center) and the second a grass and sky background (aligned to the top-left corner).</p>
</div>

Если это еше не реально тогда придется делать куча классов что не очень хотелось бы )

Автор: dm9 16.6.2012, 00:16

Насколько я знаю, то, что вы хотите сделать, кроссбраузерно сделать невозможно. То есть, придётся плодить вложенные контейнеры, каждому назначая свой класс.

Тем не менее, есть http://www.css3.info/preview/multiple-backgrounds/. Говорят, даже работает под более-менее новыми браузерами.

Альтернативный вариант (который существует всегда) - написать скрипт.

Искусства ради можно поиграться с CSS-свойством content. Но это для очень частных случаев (CSS при этом будет весьма извращенным), и это позволит максимум навесить 2 доп. картинки на элемент. И это также не кроссбраузерно.

Автор: Aliance 19.6.2012, 15:45

Я бы попробовал использовать css 3 multibg

Код


.className {
    background: url("first.png");
    background: url("second.png");
}