我有一个加载图标,单击按钮后应该加载。我希望图标的所有背景元素都褪色,以营造纯正的加载感。最简单的方法是什么?

编辑:我所有其他元素将淡出,而不仅仅是背景图像。



$("#show").on("click",function(){
	$(".page-loader-indiv").show();
});
	$(".page-loader-indiv").hide();

.page-loader-indiv{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background: transparent url(http://web.codeevents.xyz/img/page-loader.gif) center center no-repeat;
}

body{
background:url(http://web.codeevents.xyz/img/Desserts.jpg);
color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 This is some content
 This is more content
</div>
<div class = "page-loader-indiv">
</div>

<div>
Click here to show loader
<button id ="show" >Show Loader</button>
</div>

最佳答案

我终于明白了,只是为加载程序图标设置了背景不透明度。



$("#show").on("click",function(){
	$(".page-loader-indiv").fadeIn(3000).fadeOut(3000);
});
	$(".page-loader-indiv").hide();

.page-loader-indiv{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background:rgb(0,0,0,0.5) url(http://web.codeevents.xyz/img/page-loader.gif) center center no-repeat;
}

body{
background:url(http://web.codeevents.xyz/img/Desserts.jpg);
color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 This is some content
 This is more content
</div>
<div class = "page-loader-indiv">
</div>

<div>
Click here to show loader
<button id ="show" >Show Loader</button>
</div>

10-05 20:41
查看更多