круглые изображения?

Question

Я делаю сайт на PHP, где пользователи загружают изображения для своего профиля. У меня уже есть, что работает просто отлично. Однако я хочу, чтобы изображения пользователей были кругами. Из того, что я прочитал, я считаю, что я не могу обрезать изображение в круг, мне придется замаскировать изображение, чтобы сделать его часть прозрачной. Я действительно понятия не имею, с чего начать. Я был бы очень признателен, если бы кто-нибудь мог указать мне верное направление или даже какой-нибудь пример кода !!!

Answer 1

Вам не нужно фактически редактировать изображение, если у вас есть постоянный фон страницы.Фальсифицируйте это так ...

<div style="width: 50px; height: 50px; background-image: url('path/to/user/image.jpg'); background-position: 0px 0px; background-repeat: no-repeat;">
    <img style="margin: 0px; padding: 0px; border: none;" src="path/to/circle/mask.png" alt="" />
</div>

Вы также можете добавить немало этой разметки в свою таблицу стилей (чтобы очистить ее).

Answer 2

Просто сохраните изображение в виде квадрата и используйте закругленные углы, чтобы обрезать изображение.

Вы установите изображение в качестве фонового изображения в элементе div и установите CSS на скругленные углы (достаточночтобы сделать ваш div круг).Вы можете использовать PIE, чтобы эта разметка CSS работала и в IE 6-8.Смотрите PIE сайт для более подробной информации.

http://css3pie.com/about/