Часто виникає потреба зробити так щоб фотографії, аватари чи інші якісь картинки потрібно помістити в рамку при тому, щоб сам графічний файл не міняти. Можна використати бібліотеку GD (якщо це PHP). Але можна використати більш легший і красивіший спосіб, засобами CSS.
Допустимо рамка у нас така:
Фотографія така:
Для цього пишемо html:
<div class="foto_ramka" ><img src="ramka.PNG"></div>
Пишемо стилі:
.foto_ramka {
background: url('foto.jpg') no-repeat;
background-size: 100% 100%;
width: 135px;
}
foto.jpg – наше фото, яке потрібно помістити в рамку, воно буде фоном div.
ramka.PNG – наша рамка, середина (тут – білий круг) насправді прозоре.
Результат: