jquery - 如何使背景相对于当前元素 css 淡入淡出

Question

我有一个加载图标，它应该在单击按钮后加载。我希望图标的所有背景元素都淡出，以营造一种纯粹的加载感觉。最简单的方法是什么？

编辑:我要淡化所有其他元素，而不仅仅是背景图像。

$("#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>

Answer 1

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

$("#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>