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

Question

尽管我找到了similar questions，但没有一个明显符合我的目标。

我正在尝试显示具有渐变色，不透明度低的文本（以便您可以通过它看到背景），但还具有（匹配的）实心渐变边框（即，文本笔触）。我发现similar questions的答案通过创建::before参考底图状态来复制（渐变）边框效果，从而开发出一种解决方法，但是更改文本自然状态的不透明度只会显示::before参考底图的颜色代替背景色（所需的结果）。

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

使用前面提到的其他similar questions，我花了几个小时开发了以下代码，但无法完全知道如何完成。您会在代码中注意到我使用了不同的rgba值-这样做只是为了更轻松地查看结果，并查看我是否达到了使（内部）文本具有不透明性的预期目标（以启用背景可见），而不是使用相同的颜色。我应用的不透明度越高，您可以看到的更多[文本笔触的渐变颜色。

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>