Следующая статья: Фиксированный фон на сайте, как это сделать
При этом задний фон, можно было легко менять без особых усилий. Вообще это напоминает аппликации, как детстве. Здесь на самом деле все также просто.
Для реализации желательно иметь PSD исходних или любой другой формат поддерживающий слои. Разбиваем все это хозяйство на соответствующие слои. И поможет нам в этом мой любимый PNG формат. Вот что должно получиться:
|
|
|
Какой фон в данном случае, нам будет по барабану
Общий принцип следующий
<div class="область для прорисовки"> <div class="товар"><img> картинка товара</div> <div class="рамка"></div> <div class="свет"></div> </div><!-- /область для прорисовки -->
вот что получаем
Смотрим теперь CSS
@charset "utf-8";
/* CSS Document */
/* Область для прорисовки товара */
.div_item
{
position:relative;/* Говорим всем вложенным дивам брать координаты отрисовки от начало этого div */
width:220px;/* размер рекомендуется указывать */
height:225px;
}
/* Стиль для товара */
.item
{
position:absolute;/* рисуем от абсолютных координат для совместимости между браузерами */
z-index:1;/* рисуем на самом первом уровне*/
top:45px;/* Устанавливаем коориданты откель рисуем товар, подгоняем нужное значение */
left:0px;
width:220px;/* размер рекомендуется указывать */
height:225px;
}
.item_border
{
position:absolute;
z-index:2;/* Рамку рисуем по верх товара*/
background-image:url('http://www.sd-company.su/images/html_focus_png_003.png');
background-repeat:no-repeat;/* рамку рисуем без повторений */
top:0px;
left:0px;
width:220px;/* размер рекомендуется указывать */
height:225px;
}
.item_light
{
position:absolute;
z-index:3;/* свет рисуем поверх рамки */
background-image:url('http://www.sd-company.su/images/html_focus_png_004.png');
background-repeat:no-repeat;/* свет рисуем без повтора */
top:0px;
left:0px;
width:220px;/* размер рекомендуется указывать */
height:225px;
}
Видео: «Это не то, о чем вы подумали»
Невыдуманные ситуации, иногда случающиеся с каждым из нас
