时间戳

首页 > 解决方案 > 可以制作非常大的线性渐变吗？

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

问题描述

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

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

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

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>

标签： csslinear-gradientshtml-rendering

解决方案

您可以使用伪元素并这样做。

.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>

推荐阅读