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并在每个图标上单独定位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显示所需图标的数量。

多个图标上的渐变

2 个答案: