代码之家  ›  专栏  ›  技术社区  ›  Harry Francis

90度线性渐变上的不均匀边缘

  •  0
  • Harry Francis  · 技术社区  · 7 年前

    我正在尝试使用这个CSS来创建一个半色调半透明的背景。

    linear-gradient(90deg, rgba(238, 238, 241, 0.9) 50%, transparent 0);
    

    这在大多数情况下都很好,但在某些浏览器宽度下,颜色/透明部分之间的分割会变得不均匀和锯齿状。

    我已经研究了常见的渲染错误,例如,使用45度角时。但永远不要越过直线。

    我的假设是,这个问题是由亚像素渲染问题引起的,因为宽度是一个百分比。有人知道我该如何应对吗?

    Jagged line on linear gradient

    2 回复  |  直到 7 年前
        1
  •  0
  •   Abhijeet    7 年前

    我认为这个问题主要出现在chrome上,几天前我遇到了同样的问题,然后我使用css属性修复了它,即

    -webkit-backface-visibility: hidden;
    -webkit-background-clip: content-box;
    padding: 1px;
    

    也许这对你有帮助!!

        2
  •  0
  •   Harry Francis    7 年前

    在评论中,Temani建议我尝试使用十进制百分比。

    我已将CSS更改为

    linear-gradient(90deg, rgba(238, 238, 241, 0.9) 50.1%, transparent 0);
    

    现在它正在发挥作用。仍然不太清楚为什么会这样,但至少它在视觉上起作用了!如果有人能对此进行扩展,我很想知道更多。