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/

正如你在演示中看到的那样，图像边框在某种程度上并不流畅，为什么它会这样显示？如何解决这个问题？

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

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>

透明背景上不平滑的图像

2 个答案: