Клип-путь вставки круга

Question

У меня квадратное изображение, и я хочу обрезать его по центру с помощью круга, чтобы увидеть, что позади (на самом деле это фоновое изображение тела). Я обнаружил свойство clip-path CSS, но я прибыл только для создания круга с изображением вместо создания окружения, окруженного моим изображением.

До сих пор у меня был белый фон, поэтому я просто создал ::after элемент белый, со вставкой box-shadow, но теперь у меня есть изображение для фона, поэтому я не могу его сохранить.

Есть ли способ с или без использования пути пути для достижения этого?

PS: конечная цель - создать вращающийся винил musi c, поэтому это среднее отверстие необходимо! :)

Спасибо.

Answer 1

Вы можете сделать это, используя mask, а не clip-path

img {
  border-radius:50%;
  -webkit-mask:radial-gradient(farthest-side,transparent 15%,#fff 16%);
          mask:radial-gradient(farthest-side,transparent 15%,#fff 16%);
}

body {
  background:linear-gradient(to right,gray,yellow);
}

<img src="https://i.picsum.photos/id/1003/400/400.jpg">