10
Авг

Наложение рамки на фото с прозрачным центром

Если на сайте представленно большое количество картинок (например каталог продукции или интернет магазин) и вы хотите поместить их в рамку, как например здесь, вы можете воспользоваться данным методом.
Вариант с абсолютным позиционированием.

<div class="framed-image">
  <img src="image.jpg" alt="Фото" />
  <div class="frame"></div>
</div>


Все картинки одинакового размера.

CSS:
Код:
.framed-image {
  position:relative;
  width: 700px;
  height: 300px;
}

.frame {
  position:absolute;
  top:0;
  left:0;
  width: 700px;
  height: 300px;
  background: url('zerkalo2.gif') 0 0 no-repeat;
}

.framed-image img {
  display:block;
}
 

Комментарии

Rss-лента комментариев к этому посту

Оставьте свой комментарий

Заменить картинку
жирный курсив цитата

С правилами ознакомлен
 

Правила публикования комментариев
1. Не информативные комментарии вида "Спасибо, замечательная статья", имеющие ссылку на сайт, скорее всего будут удалены.
2. В поле "сайт" указывается ссылка на главную страницу сайта для людей.
Владелец этого блога незамедлительно удалит спам в любом его проявлении.