主页 / 问题 / 1606232
Accepted
DAYMERE
Asked:2025-02-04 19:03:20 +0000 UTC2025-02-04 19:03:20 +0000 UTC

带有白色背景的 HTML CSS 文本

  • 772

你能告诉我如何制作如下图所示的带有圆边的文本背景吗？

注意：文本和图像可以更改为任何所需的值。 在此处输入图片描述

javascript

2 个回答

  1. Best Answer

    这就是我所取得的成就。不幸的是，存在大量的伪影，并且无法以图像的形式呈现背景。

    您可以在这里享受一些乐趣 - 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>

    • 5

  2. 感谢大家的评论，如果感兴趣的话，可以使用 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>

    样式表：

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

    示例 1

    示例 2

    • 4

相关问题