文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

实例详解CSS渐变锯齿问题如何解决!

2022-11-25 18:00

关注

那么为啥会产生锯齿感呢?

传统网页的呈现是基于像素单位的,对于这种一种颜色直接过渡另外一种颜色状态的图片,容易导致可视质量下降(信息失真)。因而对于普通的渐变元素,像是上述写法,产生了锯齿,这是非常常见的在使用渐变过程中的一个棘手问题。

简单的解决办法

解决失真的问题有很多。这里最简单的方式就是不要直接过渡,保留一个极小的渐变过渡空间。

上述的代码,我们可以简单改造一下:

div {    width: 500px;    height: 100px;  - background: linear-gradient(37deg), #000 50%, #f00 50%, #f00);  + background: linear-gradient(37deg), #000 49.5%, #f00 50.5%, #f00);}


仔细看其中的变化,我们从 50% --> 50% 的直接过渡,变化成预留了 1% 的渐变过渡空间,效果如下:

9bb6cdb8068db5048b56a2b8ae473a1.jpg

可以看到,效果立马有了大幅提升!

当然,如果不想修改原代码,也可以通过叠加一层伪元素实现,这里给出 3 种方式的对比图:

<div></div><div class="gradient"></div><div class="pesudo"></div>

:root {
   --deg: 37deg;
   --c1: #000;
   --c2: #f00;
   --line-width: 0.5px;
}
div {
   margin: auto;
   width: 500px;
   height: 100px;
   background: linear-gradient(
       var(--deg),
       var(--c1) 50%,
       var(--c2) 50%,
       var(--c2) 0
   );
}
// 方法一:
.gradient {
   background: linear-gradient(
       var(--deg),
       var(--c1),
       var(--c1) calc(50% - var(--line-width)),
       var(--c2) calc(50% + var(--line-width)),
       var(--c2) 0
   );
}
// 方法二:
.pesudo {
   position: relative;

   &::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(
           var(--deg),
           transparent,
           transparent calc(50% - var(--line-width)),
           var(--c1) calc(50% - var(--line-width)),
           var(--c2) calc(50% + var(--line-width)),
           transparent calc(50% + var(--line-width)),
           transparent
       );
   }
}


通过伪元素叠加的意思是,在产生锯齿的地方,实现一个平滑过渡进行覆盖:

1949031684-38b7e37fe039ffaa.gif

效果如下:

14ed1f4d23c8412f49785081c235cd9.jpg

CodePen Demo -- 消除 Gradient 锯齿

划重点!此方法适用于线性渐变、径向渐变、角向渐变,是最为简单的消除 CSS 锯齿的方式。

更为高阶的锯齿消除法

当然,也还有其他更为高阶的锯齿消除法。

在仿生狮子的这篇文章中 -- CSS 幻术 | 抗锯齿,还介绍了另外一种有意思的消除锯齿的方式。以下内容,部分摘录至该文章。

我们可以建立一种边缘锯齿边缘->重建锯齿边缘的锯齿消除方法。

我们需要做的,就是在锯齿处,叠加上另外一层内容,让锯齿感不那么强烈。称为像素偏移抗锯齿(Pixel-Offset Anti-Aliasing,POAA)。

在Implementing FXAA这篇博客中,解释了 FXAA 具体是如何运作的。对于一个已经被找到的图形边缘,经过 FXAA 处理后会变成这样,见下两幅图:

4f54a7b2d6f82325e80df20cebef61a.jpg

7f79f11c4068c370c6509006949ad2a.jpg

FXAA(Fast Approximate Anti-Aliasing),快速近似抗锯齿,它找到画面中所有图形的边缘并进行平滑处理。

我们可以轻易找到找到渐变的边缘地方,就是那些渐变的颜色改变的地方。有了边缘信息后,接着就要重建边缘。重建边缘也许可以再拆分,分为以下几个步骤:

这就是大体思路,我们并没有参与浏览器的渲染,而是通过像 FXAA 一样的后处理的方法。在已渲染的图像上做文章。

比如说,我们有这样一张图:

.circle-con {    $c1: #cd3f4f;    $c2: #e6a964;    position: relative;    height: 300px;    background-image: repeating-radial-gradient(        circle at 0% 50%,         $c1 0,         $c2 50px    );}


65ae80c26c0f8001108dc0d8d2914a8.jpg

边缘信息如下:

4cfe40f88d633706685b0ca803d8ce2.jpg

我们要做的,就是在它的边缘处,利用渐变再生成一段渐变,通过准确叠加,消除渐变!原理图如下:

1210954142-733ca35103f2c3b6.gif

原理可行,但是实操起来非常之复杂,计算量会比较大。感兴趣的可以拿这段代码尝试一下:

.repeat-con {    --c1: #cd3f4f;    --c2: #e6a964;    --c3: #5996cc;    position: relative;    height: 300px;    background-image: repeating-linear-gradient(        var(--deg),        var(--c1),        var(--c1) 10px,        var(--c2) 10px,        var(--c2) 40px,        var(--c1) 40px,        var(--c1) 50px,        var(--c3) 50px,        var(--c3) 80px    );    &.antialiasing {        &:after {            --offsetX: 0.4px;            --offsetY: -0.1px;            --dark-alpha: 0.3;            --light-alpha: 0.6;            --line-width: 0.6px;            content: '';            position: absolute;            top: var(--offsetY);            left: var(--offsetX);            width: 100%;            height: 100%;            opacity: 0.5;            background-image: repeating-linear-gradient(                var(--deg),                var(--c3),                transparent calc(0px + var(--line-width)),                transparent calc(10px - var(--line-width)),                var(--c2) 10px,                var(--c1) 10px,                transparent calc(10px + var(--line-width)),                transparent calc(40px - var(--line-width)),                var(--c1) 40px,                var(--c2) 40px,                transparent calc(40px + var(--line-width)),                transparent calc(50px - var(--line-width)),                var(--c3) 50px,                var(--c1) 50px,                transparent calc(50px + var(--line-width)),                transparent calc(80px - var(--line-width)),                var(--c1) 80px            );        }    }}


最后

简单总结一下,本文介绍了几种 CSS 中可行的消除渐变锯齿的方法。

好了,本文到此结束,希望本文对你有所帮助 :)

以上就是实例详解CSS渐变锯齿问题如何解决!的详细内容,更多请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯