Javascript 透明背景上的图像不平滑

我对一些div有加载效果，我在它们上面放了一个透明的div，中间有一个加载图像

以下是CSS：

.gear-modal {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index:2147483640;
    overflow:hidden;
    background-image:url('https://business.comcast.com/img/preloader.gif');
    background-repeat:no-repeat;
    background-position: center;
    background-color:rgba(0,0,0,0.5);
}

请参阅此JSFIDLE演示：

正如您在演示中所看到的，图像的边框在某种程度上是不平滑的，为什么会这样显示？如何解决这个问题

---

附言：问题不在于加载图像，相同的图像在其他地方看起来都很好，但在这里却不是。

不，它实际上只是图像。图像边缘周围有难看的白色不透明像素。当你在它后面放一个纯黑色的背景时，这是很明显的

---

如果你不喜欢它的外观，我建议你找一个不同的图像。

是的，图像看起来真的是像素化了。尝试使用不同的gif图像并调整宽度和高度。查看这个片段，在这里我使用了不同的图像并设置了高度和宽度：）

功能显示档位模式（元素）{
$（element.css（'position'，'relative'）；
var custom_modal_html=''；
$（元素）.prepend（自定义模式html）；
$（元素+'.gear modal'）.fadeIn（）；
}
$（'.show_loading'）。在（'单击'，函数（）上）{
显示“齿轮”模式（“我的div”）；
})

.gear模式{
宽度：100%；
身高：100%；
位置：绝对位置；
z指数：2147483640；
溢出：隐藏；
背景图像：url（'http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_gray_350.gif');
背景尺寸：64px 64px；
背景重复：无重复；
背景位置：中心；
背景色：rgba（0,0,0,0.5）；
}
.my_div{
最小高度：400px；
}

这里有一些内容……



单击此处显示加载情况

那么为什么我尝试加载的所有图像都是这样的？@PriyaRajaram这怎么可能被修复呢？你的图像似乎也被像素化了@真的吗？IDK。对我来说，它看起来比你的裙子好。无论如何，重点是，改变你的加载程序。搜索谷歌，得到一张分辨率很好的图片！！谢谢