加载图标以低分辨率加载

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％不透明），因此图像编辑器可以应用无光泽的颜色，该颜色可转换为图像中的像素，这有助于不透明像素的边缘和＃34;流血＆＃34;进入后台。然而，当哑光颜色很浅并且背景很暗时，如在您的示例中，哑光像素是显而易见的。

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

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

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