Question

这是我的脚本，用于加载预加载器图像

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>

当加载此预加载器图像时，如何使背景模糊？

Answer 1

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

Answer 2

使用 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淡化背景。

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

模糊背景，加载预加载器图像时

3 个答案: