1 способ. Обрабатывать каждое изображение в графическом редакторе перед размещением на сайте.
Этот способ неудобен, потому что занимает лишнее время.
2 способ. Использовать CSS для маскировки изображения.
Для использования этого способа сначала, нужно создать «изображение-маску» с прозрачной окружностью в центре. Подразумевается, что все картинки, на которые будет наложена «маска», имеют одинаковый размер. Размер маски должен быть таким же, как у изображений. Создаем маску в Adobe Photoshop или другом графическом редакторе.
Квадратиками показана прозрачная область. Сохраняем картинку-маску в формате PNG. При сохранении в поле “Matte” выбираем “white”.
Далее переходим к верстке. Создаем в текстовом редакторе, например, в Notepad++ html-страничку и вставляем в нее следующий код:
HTML
{code class="brush: html; gutter: false;"}
<div id="expml1">
<img src="http://mattweb.ru/img/cat.jpg" />
<img src="http://mattweb.ru/img/mask.png" class="mask" />
</div>
{/code}
Блок с id="expml1"
– будет контейнером для изображений. Изображений будет 2 – собственно картинка и «маска». Изображение «маски» будет абсолютно позиционировано относительно контейнера, а картинка, которую нужно показать в круге не будет «выпадать» из нормального потока документа. В итоге получится, что абсолютно позиционированное изображение «маски» «накроет» основную картинку. Чтобы все это произошло нужно написать следующие CSS-правила:
CSS
{code class="brush: css; gutter: false;"}
#expml1{
position: relative;
}
#expml1 .mask{
position: absolute;
top:0;
left:0;
}
{/code}
Есть еще один способ поместить изображение под «маской» с помощью CSS. Подход будет немного другой.
HTML
{code class="brush: html; gutter: false;"}
<div id="expml2">
<img src="http://mattweb.ru/img/mask.png" style="background: url('/img/cat.jpg') no-repeat;" />
</div>
{/code}
Здесь вообще все просто: размещаем на странице «картинку-маску», а основное изображение делаем ее фоном.
Может случиться так, что основное изображение будет немного крупнее, чем «картинка-маска», тогда, можно его центрировать.
CSS
{code class="brush: css; gutter: false;"}
background:url(img/cat.jpg) no-repeat 50% 50%;
{/code}