可以制作非常大的线性渐变吗？

Question

对于 link 悬停效果，我希望背景颜色与当前文本颜色相同，并带有一点透明度。由于您不能直接将 alpha 添加到 currentColor，我想到的一个技巧是使用真正拉伸的渐变（见下文）。

这很好用，但我不确定在资源方面让端点偏离图表是否安全。浏览器是否必须生成整个渐变（这将是一个巨大的图像）以仅显示它的一部分，或者它是否只生成必要的部分？如果一个页面上有很多这样的内容，浏览器是否必须为每个实例重新生成它？

简而言之，像下面这样制作巨大的渐变会导致性能问题，还是可以这样做？

a {
    color: blue;
}
a:hover {
    background: linear-gradient(currentColor -25000%, transparent 10000%);
    /* stretched out far enough so you only see a single color */
    /* (these values work like an alpha of 0.25) */
}

<a href="#">lorem ipsum</a>
<a href="#" style="color: red;">lorem ipsum</a>

Answer 1

你可以使用一个伪元素，像这样做。

.link {
  position: relative;
  display: inline-block;
  color: red;
  padding: 1rem;
}

.link::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  opacity: 0;
  z-index: -1;
  transition: opacity 140ms ease;
}

.link:hover::after {
  opacity: .4;
  transition: opacity 140ms ease;
}

<a href="#0" class="link">press</a>

可以制作非常大的线性渐变吗？

Is it okay to make really large linear gradients?

css

linear-gradients

html-rendering