1

尽管我发现了类似的问题，但没有一个明确符合我的目标。

我正在尝试使用渐变颜色显示文本，不透明度低（因此您可以通过它看到背景），而且还带有（匹配的）纯色渐变边框（即文本笔划）。我发现类似问题的答案通过创建一个::before复制（渐变）边框效果的底层状态来开发一种解决方法，但是更改文本自然状态的不透明度只会显示::before底层文本的颜色而不是背景颜色（期望的结果）。

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

使用前面提到的其他类似问题，我已经在几个小时内开发了以下代码，但无法完全弄清楚它是如何完成的。您会在我的代码中注意到我使用了不同的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>

4

1 回答 1

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>

在此处输入图像描述

于 2020-05-15T21:57:10.403 回答