主页 / 问题 / 1588469
Accepted
DAYMERE
Asked:2024-07-26 20:13:59 +0800 CST2024-07-26 20:13:59 +0800 CST

背景框架文本

  • 772

如何实现像截图中那样的效果，使文本具有白色背景和圆角边缘？每张幻灯片的文本可能会有所不同。

在此输入图像描述

html

1 个回答

  1. Best Answer

    这是一个解决方案，作者提供了一个 SVG 过滤器来在文本背景上创建“粘性”或“粘性”效果。

    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>

    • 2

相关问题