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

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

linear-gradients css

Harry Francis · 技术社区 · 8 年前

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

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

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

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

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

2 回复 | 直到 8 年前

Abhijeet 8 年前

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

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

也许这对你有帮助!!

Harry Francis 8 年前

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

我已将CSS更改为

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

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

推荐文章

swastij · 如何在颤振中创建垂直线性梯度?

3 年前

Randy Hall · 六边形CSS背景

8 年前

mjpramos · 鼠标移动时页面背景渐变变化

8 年前

Honza Synek · 带3个方向的css背景

8 年前

mleroy · 我无法让连续的画布矩形在js中具有重复的线性渐变。有人知道怎么做吗?

8 年前

David · 如何在CSS中悬停时使用渐变滑入和滑出按钮动画

8 年前

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

8 年前

paulcook · CSS带渐变遮罩的垂直滚动字幕

8 年前

Pallas Aleksander · IE和Firefox中的渐变应用于背景,而不是文本

9 年前

user2860957 · 线性梯度和背景尺寸加上这种酷炫效果,任何人都能解释吗

9 年前