这个问题在这里已有答案：
这是我加载预加载器映像的脚本
JavaScript的：
<script>
function showDiv() {
document.getElementById('showme').style.display = "block";
setTimeout(function() {
document.getElementById('loadingGif').style.display = "none";
document.getElementById('showme').style.display = "block";
},2000);
}
</script>
视图：
<div class="form-group alignright">
<label class="col-sm-12 control-label alignright">Upload CSV</label>
<div id="showme" style="display:none"><img src="<?php echo base_url()?>images/img.gif"></div>
<div class="col-sm-12">
<input type="file" name="filename" size="20" />
<button type="submit" id="upload" class="btn btn-primary" onclick="showDiv()">Upload</button>
</div>
</div>
当我加载此预加载器图像时，如何模糊背景。
使用Filter css属性：filter: blur(8px)
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-ms-filter: blur(8px);
-o-filter: blur(8px);
filter: blur(8px);
使用图像的简单示例：
How To Create a Blurry Background Image
浏览器支持：
IE支持（无基本支持）：
您可以使用opacity淡化背景。
<head>
<script>
function showDiv() {
document.getElementById('showme').style.display = "block";
document.getElementsByClassName('blur')[0].style.filter = "blur(8px)";
}
</script>
</head>
<body>
<div id="showme" style="display:none">
<img src="image.gif">
</div>
<div class="form-group alignright blur">
<label class="col-sm-12 control-label alignright">Upload CSV</label>
<div class="col-sm-12">
<input type="file" name="filename" size="20" />
<button type="submit" id="upload" class="btn btn-primary"
onclick="showDiv()">Upload</button>
</div>
</div>
</body>
您可以使用Filter css属性来模糊背景
你可以试试这个：
<style>
#overlay {
position: fixed;
height: 100%;
width: 100%;
top:0;
left: 0;
background-color:#ccc;
z-index:9999;padding-top: 10px;
}
</style>
<div id="overlay">Loading...</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
$('#overlay').fadeOut(500);
</script>