在 CSS / HTML 中使文本发光后删除黑框答案

【问题标题】：Removing the black box after making text glow in CSS / HTML在 CSS / HTML 中使文本发光后删除黑框
【发布时间】：2023-01-25 23:52:39
【问题描述】：

我正在尝试使用 CSS 使我的一些文本发光。我已经成功地让它发光了，但是现在有一个我似乎无法摆脱的烦人的黑盒子。我只是希望它是透明的，不要有破坏效果的可怕黑框。

我在盒子下面附上了一张图片

如您所见，背景几乎就像不透明一样。如何摆脱这个框，使文本背景完全透明？

.heading-secondary {
  font-size: 2.8rem;
  font-weight: 100;
  position: absolute;
  top: 10%; /* 110%; */
  /* font-size: 72px;*/
  background-image: none;
  background: -webkit-linear-gradient(#007CF0, #00DFD8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 40px 20px #0ff;
}

<section class="second-page">
  <div class="our-news">
    <h1 class="heading-secondary">
      Why buy through us?
    </h1>
  </div>
</section>

【问题讨论】：

您正在使用 box-shadow 这就是显示该框的原因
如果您为框着色，文本将几乎不可见。那是目标吗？
我将如何给盒子上色？

标签： html css

【解决方案1】：

您的代码中的主要问题是：您使用了框阴影。 CSS 中使用框阴影来显示框的阴影，以便在文本后面看到黑框。所以你必须使用文字阴影以获得应有的效果。您可以查看下面的示例，也可以运行 sn-ps。您可以自己编辑、添加更多阴影、散布像素。谢谢你！！

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800;900&display=swap');

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body{
  font-family: "Urbanist", sans-serif;
  background-color: #000000;
}

html{
  scroll-behavior: smooth;
}

.main-box{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}

.heading-secondary {
  font-size: 2rem;
  font-weight: 100;
  position: absolute;
  top: 20%;
  background-color: transparent;
  background-image: none;
  background: -webkit-linear-gradient(#007CF0, #00DFD8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: -7px -4px 14px #0ff, -16px 0px 27px #0ff, -6px -2px 34px #0ff
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
    integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
  <div class="main-box">
    <h1 class="heading-secondary">
      Why buy through us?
    </h1>
  </div>
</body>

</html>

【讨论】：