透明背景上的图像不平滑

Not smooth image on transparent background

本文关键字：平滑 图像 背景 透明      更新时间：2023-09-26

我对一些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/

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

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

是的，图像看起来真的像素化了。尝试使用不同的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>

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

如果你不喜欢它的样子，我建议你找一张不同的照片。

相关文章：