使圖像顯示爲一個圓圈

Question

我找到了一種方法來處理CSS3，但IE仍然不支持它。我想知道是否有辦法做到這一點，以便它可以與所有流行的瀏覽器兼容。 我知道我可以用蒙版來做，但如果我想在後臺顯示用戶上傳的圖片，這不是一個選項，或者至少我不知道如何實現。任何人都可以給我一個想法嗎？也許在上傳圖像時將背景中的圖像處理變爲圓形並使背景透明，但我不知道如何處理該圖像？

Answer 1

您可以通過CSS3 border-radius來做到這一點，但正如您所說，舊的IE不支持這個屬性。

但PIE.htc（在我的例子PIE.js）可以pollyfill這在 -

hence- http://codepen.io/hwg/pen/IBrow。

這使用標準border-radius，並且複製粘貼pie.js， 邊框半徑是圖像高度和寬度的50％。

我不能說性能（請參閱文檔），但我認爲這是做你想做的。

Answer 2

你可以用你需要的背景顏色疊加一個在正方形中間有一個透明圓的PNG圖像。然後將其放置在上傳的圖像上，使其成爲一個圓圈的幻覺。