移除css线性渐变白线

Question

我认为这是一种视错觉...但想知道如何去除线性渐变末端的白线。这是我的 css 代码。

position: absolute;
z-index: 1;
bottom: 0;
background: linear-gradient(180deg, rgba(210, 210, 210, 0) 18.61%, #262626 100%);
width: 100%;
height: 180px;

看起来像这样。

谢谢！

Answer 1

这就是您所需要的！ Easing linear gradients.

这是一本非常有趣的读物，但它本质上可以归结为像这样手动缓和渐变：

linear-gradient(
  hsl(0, 0%, 0%) 0%,
  hsla(0, 0%, 0%, 0.738) 19%,
  hsla(0, 0%, 0%, 0.541) 34%,
  hsla(0, 0%, 0%, 0.382) 47%,
  hsla(0, 0%, 0%, 0.278) 56.5%,
  hsla(0, 0%, 0%, 0.194) 65%,
  hsla(0, 0%, 0%, 0.126) 73%,
  hsla(0, 0%, 0%, 0.075) 80.2%,
  hsla(0, 0%, 0%, 0.042) 86.1%,
  hsla(0, 0%, 0%, 0.021) 91%,
  hsla(0, 0%, 0%, 0.008) 95.2%,
  hsla(0, 0%, 0%, 0.002) 98.2%,
  hsla(0, 0%, 0%, 0) 100%
);

如果这看起来令人生畏或者您需要多次复制，请转到文章底部。它描述了使用 CSS 处理器（例如 PostCSS 或 SCSS.

来自动化效果的方法

移除css线性渐变白线

Remove css linear-gradient white line

css

gradient

linear-gradients