我有一个加载图标,它应该在单击按钮后加载。我希望图标的所有背景元素都淡出,以营造一种纯粹的加载感觉。最简单的方法是什么?
编辑:我要淡化所有其他元素,而不仅仅是背景图像。
$("#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>
关于jquery - 如何使背景相对于当前元素 css 淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44711873/