模糊背景，加载预加载图像时[重复]答案

【问题标题】：Blur the background ,When loading pre-loader image [duplicate]模糊背景，加载预加载图像时[重复]
【发布时间】：2018-12-15 05: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>

当我加载这个预加载图像时，如何模糊背景。

【问题讨论】：

最好的解决方案是stackoverflow.com/a/32187069/3702797，不幸的是requiring horrible polyfill。

标签： javascript preloader

【解决方案1】：

使用 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

浏览器支持：

Browser Compatibility

IE 支持（无基本支持）：

您可以使用opacity 淡化背景。

【讨论】：

【解决方案2】：

<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 属性来模糊背景

【讨论】：

【解决方案3】：

你可以试试这个：

<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>

【讨论】：