Как сделать изображение прозрачным по краям?

Для создания эффекта прозрачности по краям изображения в CSS можно использовать свойство background-clip. С помощью этого свойства можно указать, как область фона будет обрезаться внутри элемента.

Чтобы сделать изображение прозрачным по краям, вам потребуется следующая разметка HTML:

<div class="container">
  <img src="image.jpg" alt="Изображение" class="transparent-image">
</div>

Затем вы можете использовать следующий код CSS:

.container {
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 0 0/100% 100%, url(image.jpg) center center/cover no-repeat;
  padding: 10px; /* Можете настроить отступы на свое усмотрение */
  display: inline-block;
}

.transparent-image {
  background-clip: padding-box;
  border-radius: 10px; /* Если вы хотите скруглить углы изображения, установите требуемый радиус */
}

Обратите внимание, что здесь мы используем фоновый градиент для создания прозрачного эффекта. Два значения rgba(0, 0, 0, 0) указывают, что цвет фона должен быть полностью прозрачным. Этот градиент применяется только к заднему фону контейнера, не затрагивая само изображение.

Свойство background-clip с значением padding-box говорит, что фон должен обрезаться в пределах области, определенной паддингами. Это позволяет применить прозрачный эффект только к краям изображения, оставляя основное содержимое непрозрачным.

Если вам нужно скруглить углы изображения, вы можете использовать свойство border-radius, чтобы указать радиус скругления.