Как сделать волны картинке сверху и снизу?

Ссылка скопирована
CSS HTML SVG
24 апреля 2026 1 ответ

Всем привет , как на сайте сделать блок у которого верх и низ в виде волн.
В моей голове пока схема такая,

Верх и них картинки это SVG волны, генерировать их можно через разные сервисы.
Вопрос как этим волнам дать продолжение картинки по сути фигура нужна

Как сделать волны картинке сверху и снизу?

Дополнительно:

Ответы:

вопрос не понятен по продолжению картинки
это что значит?

если по такой схеме, то дайте через before,after с position absolute
снизу и сверху эти волны
в чем проблема?

  • Наверное более понятнее будет по другому. Как в фигуру SVG вставить картинку фоном. Например есть SVG в виде пузыря и в нем до границ фигуры это картинка.

    Вот тут я чайник полный поэтому примеры в виде кода приветствуются. Гугление правильного ответа пока не дают

  • Константин, Вы мыслите не в том направлении. Эти волны SVG должны быть поверх картинки, и цвет должен быть тот же, что и фон. Вот например как на этом сервисе Тыц.... Может показаться что тут волна цветная рисуется, на самом деле цветной это фон, а волна это белая svg.
  • Константин, сама волна есть ?
  • Максим, Да сама волна есть.
    Кажется и решение уже есть почти.

    Отпишусь о решении вдруг кому пригодиться потом.

  • Константин, волну в растровом редакторе закрасить в чёрный цвет и через mask и webkit-mask наложить на нужное изображение
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Кирилл JS Ответ

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

.wave {
  position: relative;
  overflow: hidden;
}
 
.wave:before, .wave:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20px; /* Высота волны */
  background: url('wave.png') repeat-x; /* Путь к изображению волны */
  top: -20px; /* Расстояние от верхнего края */
}
 
.wave:after {
  bottom: -20px; /* Расстояние от нижнего края */
  transform: scaleY(-1); /* Переворачиваем изображение для нижней волны */
}

.wave { position: relative; overflow: hidden; } .wave:before, .wave:after { content: ""; position: absolute; width: 100%; height: 20px; /* Высота волны */ background: url('wave.png') repeat-x; /* Путь к изображению волны */ top: -20px; /* Расстояние от верхнего края */ } .wave:after { bottom: -20px; /* Расстояние от нижнего края */ transform: scaleY(-1); /* Переворачиваем изображение для нижней волны */ }

В данном коде создается контейнер с классом "wave", внутри которого добавляются псевдоэлементы ":before" и ":after". Эти псевдоэлементы имеют заданные стили для создания эффекта волн. Разумеется, вместо 'wave.png' необходимо указать путь к вашему изображению волны.

Пример использования:

<div class="wave">
  <img src="image.jpg" alt="Wave Image">
</div>

<div class="wave"> <img src="image.jpg" alt="Wave Image"> </div>

Таким образом, применяя указанный выше CSS-код к вашему проекту, вы сможете легко создать эффект волн на изображении сверху и снизу.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 0 ответов