Как в HTML CSS вывести текст с белым фоном?

Question

Подскажите как можно сделать задний фон текста с закругленными краями как на изображении ниже?

Подмечу: текст и картинка могут меняться на произвольные

Answer 1

Спасибо всем за комментарии, кому интересно данный эффект можно реализовать с помощью SVG фильтров, заднего фона текста и еще парочку хитрых способов чтобы объединить весь блок как на скрине. Сам эффект называется Gooey пример и ссылки на примеры прикрепляю

SVG:

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
    <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />    
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
        <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
</defs>

CSS:

display: inline;
box-decoration-break: clone;
background: #FFF;
filter: url('#goo');

Пример 1

Пример 2

Answer 2

Вот чего мне удалось добиться. К сожалению, очень много артефактов и невозможен фон в виде изображения.

Поразвлечься можно здесь - https://codepen.io/aliencash/pen/QwLRoOv

.text {
  position: relative;
  font-size: 200%;
  line-height: 2;
}

.backgorund {
  padding: 40px;
  background-image: linear-gradient(90deg, #000, #000);
  filter: contrast(20);
}

.background-text {
  text-decoration: 2em underline white;
  text-decoration-skip-ink: none;
  text-underline-offset: -1.32em;
  color: white;
  filter: blur(8px);
  transform: scale(1.04, 1);
}

.content {
  position: absolute;
  left: 40px;
  top: 40px;
  right: 40px;
  color: black;
}

body {
  background-color: black;
  min-height: 100dvh;
  font-family: system-ui, sans-serif;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

p {
  margin: 0;
}

<div class="text">
  <div class="backgorund">
    <p class="background-text">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus culpa quia maxime, tempora facere ipsa veritatis alias voluptate reiciendis harum?
      &nbsp;&nbsp;&nbsp;
    </p>
  </div>
  <p class="content">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus culpa quia maxime, tempora facere ipsa veritatis alias voluptate reiciendis harum?
  </p>
</div>
</div>

БЛОГ НА HUSL

Как в HTML CSS вывести текст с белым фоном?

Ответы (2 шт):