Как в html сделать обтекание картинки текстом

4 года назад

Человек-Молекула

Ответы

Для того, чтобы сделать обтекание текста по контуру картинки с прозрачным фоном в HTML, можно использовать свойство CSS shape-outside.

Необходимо добавить изображение на страницу HTML:

<img src="path/to/image.png" alt="image" class="image" />

Далее, добавить стили CSS для изображения:

.image {
  float: left;
  shape-outside: url('path/to/image.png');
  shape-margin: 20px;
}

Добавляем текст, который будет обтекать изображение:

<div class="text">
  <p>Текст, который будет обтекать изображение.</p>
</div>

Добавляем стили CSS для текста. Скрываем часть текста, которая будет находиться за пределами обтекаемого изображения):

.text {
  overflow: hidden;
}

2 года назад

Aleksey

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

2 месяца

Bootstrap

Навык работы с SASS, Bootstrap 5 и Gulp для ускорения, упрощения и оптимизации процесса вёрстки и разработки сайтов

Похожие вопросы