多个图标上的渐变

Question

有没有办法像this image那样在多个图标上设置渐变？

这里是my codepen案例

HTML

<div class="stars">
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
  <i class="fas fa-star"></i>
</div>

SCSS

.stars {
  background: -webkit-linear-gradient(135deg, #FEDD54, #FD9667);
  width: fit-content;
  i {
    // color: transparent;
  }
}

Answer 1

我会做的是确定一些断点。例如，如果您有 3 个图标，我会为每个图标采用 2 种颜色，然后为每个图标设置特定的渐变。

另一种解决方案是设置一般背景渐变，将图标设置为透明，并用白色背景覆盖它，但图标上方除外。我知道它们是 css 做那种事情的技巧，但不记得我是在哪里找到它们的：/

无论如何，第一个解决方案是迄今为止最简单的解决方案。

Answer 2

您可以使用 -webkit-background-clip 并在每个图标上分别放置 fixed-size gradient，但目前浏览器对此的支持仅限于 Chrome、Firefox 和 Safari .

小问题：Firefox 没有 -moz-background-clip 变体，但可以识别 -webkit- 前缀。

.stars {

  width: fit-content;
  i {
    background: -webkit-linear-gradient(135deg, #FEDD54, #FD9667);
    background-size: 100% 5em;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  i:nth-of-type(1) {
    background-position: 0 1em;
  }
  i:nth-of-type(2) {
    background-position: 0 2em;
  }
  i:nth-of-type(3) {
    background-position: 0 3em;
  }
  i:nth-of-type(4) {
    background-position: 0 4em;
  }
  i:nth-of-type(5) {
    background-position: 0 5em;
  }
}

根据您想要达到的效果，最简单的方法可能是将整行图标创建为背景图像，然后使用 width 显示所需的图标数量。

多个图标上的渐变

Gradient on multiple icons

css

gradient