加载预加载器图像时，模糊背景
加载预加载器图像时，模糊背景
提问于 2018-12-15 13:18:52
这是我加载预加载器图像的脚本
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> 当我加载这个预加载器图像时，我如何模糊背景。
回答 2
Stack Overflow用户
发布于 2019-02-04 17:24:28
使用过滤器 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来淡出背景。
Stack Overflow用户
发布于 2018-12-15 14:21:51
您可以尝试这样做：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53789757
复制相关文章
相似问题