html - 以低分辨率加载图标

Question

所以我添加了一个旋转图标，在我的网站上加载某些内容时会显示该图标，到目前为止它可以正常工作，但它看起来真的很糟糕并且看起来像低分辨率，即使图像本身看起来不错。有什么想法吗？

在这里输入代码

CSS:

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 0; top: 0; }
.se-pre-con {
    position:fixed;
    left:0;
    top:50px;
    width:100%;
    height:100%;
    z-index: 9999;
    background: url('../blue_loading.gif') center no-repeat;
}

我试了一下，但想不出为什么它看起来那么糟糕。有什么想法或解决办法吗？

谢谢

Answer 1

您的 GIF 应用了浅色哑光颜色。由于 GIF 最多只有 256 种颜色，并且没有不同程度的透明度(像素要么 100% 透明，要么 100% 不透明)，图像编辑器可以应用一种哑光颜色，它可以转化为图像中的像素，帮助不透明像素的边缘“流血”进入背景。但是，当哑光颜色较浅且背景较暗时，如您的示例所示，哑光像素很明显。

您可能想尝试使用更暗的哑光颜色重新保存 GIF，或者改用 CSS 动画来创建微调器。

关于透明度的进一步阅读: https://helpx.adobe.com/photoshop-elements/using/using-transparency-mattes.html

使用 CSS 创建的微调器示例: https://projects.lukehaas.me/css-loaders/