如何使背景相對於當前元素css褪色

我有一個加載圖標，點擊按鈕後應該加載該圖標。我希望圖標的所有背景元素都可以淡入淡出，以創建純粹的加載感覺。最簡單的方法是什麼？如何使背景相對於當前元素css褪色

編輯：我所有其他的元素都會淡入淡出，而不僅僅是背景圖像。

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

.page-loader-indiv{ 
 
\t position: fixed; 
 
\t left: 0px; 
 
\t top: 0px; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t z-index: 99999; 
 
\t 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>

來源

2017-06-23 Sakibur Rahman

我不認爲你可以，因爲它是圖像的一部分。除非你用透明背景創建圖像 – Simon

[用jQuery淡入淡出背景圖像？]（https://stackoverflow.com/questions/5533171/fade-background-image-in-and-out-with -jquery） – KyleS

我已完成了最後，只是還設置背景不透明度裝載機圖標。

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

.page-loader-indiv{ 
 
\t position: fixed; 
 
\t left: 0px; 
 
\t top: 0px; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t z-index: 99999; 
 
\t 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>

來源

2017-06-23 02:45:57

如何使背景相對於當前元素css褪色

回答

相關問題