Сделать отображение изображения в виде круга

Question

Я нашел способ сделать это с помощью CSS3, но IE все еще не поддерживает его. Я хочу знать, есть ли способ сделать это, чтобы он мог быть совместим со всеми популярными браузерами. Я понимаю, что могу сделать это с помощью маски, но если я хочу отображать загруженное пользователем изображение в фоновом режиме, это не вариант или, по крайней мере, я не знаю, как этого добиться. Может ли кто-нибудь дать мне представление об этом? Возможно, обработка изображений в фоновом режиме при загрузке изображения, чтобы превратить его в круг и сделать прозрачный фон, но я не знаю, как это сделать?

Answer 1

Вы можете сделать это с помощью CSS3 border-radius, но, как вы уже упоминали, старый IE не поддерживает это свойство.

Но PIE.htc (PIE.js в моем примере) может pollyfill Этой информации

ока зывается http://codepen.io/hwg/pen/IBrow.

Используется стандарт border-radius, а также скопированный и вставленный pie.js, Радиус границы составляет 50% от высоты и ширины изображения.

Я не могу говорить о производительности (см. Документы), но я думаю, что это делает то, что вы хотите.

Answer 2

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