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

Question

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

脚本：

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

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

原文由 user10768998 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 过滤器 css 属性： filter: blur(8px)

 -webkit-filter: blur(8px);
-moz-filter: blur(8px);
-ms-filter: blur(8px);
-o-filter: blur(8px);
filter: blur(8px);

使用图像的简单示例：

如何创建模糊的背景图像

浏览器支持：

浏览器兼容性

IE 支持（无基本支持）：

您可以使用 opacity 淡化背景。

原文由 David 发布，翻译遵循 CC BY-SA 4.0 许可协议