CSS 具有不透明度的渐变文本和渐变文本描边/轮廓

Question

虽然我发现，但 none 明确符合我的目标。

我正在尝试显示具有渐变颜色、低不透明度（因此您可以通过它看到背景）但也具有（匹配的）实心渐变边框（即文本描边）的文本。我发现的答案通过创建复制（渐变）边框效果的 ::before 底层状态来开发解决方法，但更改文本自然状态的不透明度只会显示 ::before 底层文本 而不是 背景颜色（期望的结果）。

我想知道的是，是否有任何变通方法可以有效地创建具有不透明度低于 1 的（内部）渐变文本的纯渐变文本笔划？

使用前面提到的其他，我在几个小时内开发了以下代码，但不太清楚如何完成。您会在我的代码中注意到我使用了不同的 rgba 值 - 这样做只是为了更轻松地查看结果并查看我是否实现了使（内部）文本具有不透明度的预期目标（以启用要看到的背景），而不是使用相同的颜色。我应用的不透明度越高，您就越能看到 workaround/makeshift 文字描边的渐变颜色。

body {
  background: #000000;
}

h1 {
  font-size: 60px;
  font-weight: 800;
  font-family: arial;
  color: rgb(255, 255, 255);
  background-image: linear-gradient(to left,
      rgba(255, 0, 0, 0.7),
      rgba(0, 0, 255, 0.7),
      rgba(255, 0, 0, 0.7));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  margin: 10px;
}

h1::before {
  content: attr(data-text);
  background: -webkit-linear-gradient(-180deg, #3399ff, #82ed89, #3399ff);
  -webkit-background-clip: text;
  -webkit-text-stroke: 5px transparent;
  position: absolute;
  z-index: -1;
}

<h1 data-text="Text">Text</h1>

Answer 1

实际上，我可以考虑使用 CSS 且不使用 SVG 的唯一方法是依靠 element() 与 mask 相结合，但支持仍然太低：

这是一个仅适用于 Firefox 的示例。诀窍是创建一个只有笔划和透明颜色的文本作为参考，该文本将在具有相同笔划的相同文本的蒙版内使用，以保持只有笔划可见并获得所需的效果。是的，这个想法有点疯狂，但它确实有效。

body {
  background: #000000;
}
h1 {
  font-size: 80px;
  font-weight: 800;
  font-family: arial;
  color:#fff;
}
#ref {
  -webkit-text-stroke: 5px red;
  color:transparent;
  display:inline-block;
}
h1.grad {
  background-image: linear-gradient(to left,
      rgba(255, 0, 0, 0.3),
      rgba(0, 0, 255, 0.4),
      rgba(255, 0, 0, 0.5));
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  margin: 10px;
}
h1.grad::after {
  content: attr(data-text);
}

h1.grad::before {
  content: attr(data-text);
  background: -webkit-linear-gradient(-180deg, #3399ff, #82ed89, #3399ff);
  -webkit-background-clip: text;
  -webkit-text-stroke: 5px transparent;
  position: absolute;
  z-index: -1;
  -webkit-mask:element(#ref);
          mask:-moz-element(#ref);
          mask:element(#ref);
}

body {
  background:url(https://i.picsum.photos/id/107/1000/1000.jpg) center/cover;
}

<h1 data-text="Some Text" class="grad"></h1>


<div style="height:0;overflow:hidden;">
<h1 id="ref">Some Text</h1>
</div>

下面应该是这样的：

另一个想法是考虑background-attachment:fixed，使用相同的背景两次。这应该适用于任何地方，但你的背景将被修复：

body {
  background: #000000;
}
h1 {
  font-size: 80px;
  font-weight: 800;
  font-family: arial;
  color:#fff;
}

h1.grad {
  background: linear-gradient(to left,
      rgba(255, 0, 0, 0.3),
      rgba(0, 0, 255, 0.4),
      rgba(255, 0, 0, 0.5)),
      url(https://i.picsum.photos/id/110/1000/1200.jpg) center/cover fixed;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
  margin: 10px;
}
h1.grad::after {
  content: attr(data-text);
}

h1.grad::before {
  content: attr(data-text);
  background: -webkit-linear-gradient(-180deg, #3399ff, #82ed89, #3399ff);
  -webkit-background-clip: text;
  -webkit-text-stroke: 5px transparent;
  position: absolute;
  z-index: -1;
}

body {
  background:url(https://i.picsum.photos/id/110/1000/1200.jpg) center/cover fixed;
}

<h1 data-text="Some Text" class="grad"></h1>

CSS 具有不透明度的渐变文本和渐变文本描边/轮廓

CSS Gradient Text with Opacity and Gradient Text Stroke / Outline

html

css

css-shapes

linear-gradients

css-gradients