透明背景上的图像不平滑

Question

我在某些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);
}

请参阅此jsfiddle演示：

http://jsfiddle.net/margwt9h/3/

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

PS：问题不在于加载图像，同一图像在其他任何地方看起来都很好，但在这里不是。

Answer 1

不，实际上它只是图像。 图像边缘周围有难看的白色不透明像素。 当您仅在其后面放置纯黑色背景时，这非常明显。

如果您不喜欢它的外观，建议您换一张图片。

Answer 2

是的，图像看起来确实像素化。 尝试使用其他gif图像并调整宽度和高度。 看看这个片段，我在其中使用了不同的图像并设置了高度和宽度:)

 function show_gear_modal(element){ $(element).css('position', 'relative'); var custom_modal_html = '<div class="gear-modal"></div>'; $(element).prepend(custom_modal_html); $(element+' .gear-modal').fadeIn(); } $('.show_loading').on('click', function(){ show_gear_modal('.my_div'); }) 

 .gear-modal { width: 100%; height: 100%; position: absolute; z-index:2147483640; overflow:hidden; background-image:url('http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_gray_350.gif'); background-size: 64px 64px; background-repeat:no-repeat; background-position: center; background-color:rgba(0,0,0,0.5); } .my_div{ min-height: 400px; } 

 <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <div class="my_div"> Here is some Content....<br /><br /><br /> <a class="show_loading"><strong>Click here to show the loading</strong></a> </div>