Фон, обрамляющий текст

Question

Как добиться такого эффекта, как на скриншоте, чтобы у текста был белый задний фон со скругленными краями? Текст может быть разным и будет меняться для каждого слайда.

Answer 1

вот такое решение, где автор предлагает SVG-фильтр для создания "липкого" или "gooey" эффекта на фоне текста.

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

Текст внутри элемента с классом .goo становится редактируемым благодаря contenteditable="true", что позволяет пользователю править текст прямо на странице, и заметить адаптивность фона под текст...

:root {
  --color-bg: #34304c;
  --color-bg2: #534d7a;
  --color-highlight: #fff;
  --font: Roboto, Helvetica;
}

.goo {
  font-size: 4rem;
  line-height: 1.35;
  display: inline;
  box-decoration-break: clone;
  background: var(--color-highlight);
  padding: 0.5rem 1rem;
  filter: url('#goo');
}

.goo:focus {
  outline: 0;
}

.edit {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--color-bg2);
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--color-highlight);
  border-radius: 1em;
}

body {
  padding: 7.5vh 100px 0 100px;
  font-family: var(--font);
  background-image: url('https://www.datocms-assets.com/75979/1661436137-services-solar-solution.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

.div-image {
  position: absolute;
  left: 0;
  bottom: 0;
}

.number-slaid {
  font-size: 0.5em;
}

<div class="div-image">
  <h1>
    <div class="goo" contenteditable="true"><span class="number-slaid">02</span><br>Sustainable<br>Finance</div>
  </h1>

  <!-- Filter: https://css-tricks.com/gooey-effect/ -->
  <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>
</svg>
</div>

БЛОГ НА HUSL

Фон, обрамляющий текст

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