javascript - 任意の背景でガウスぼかしを入れる方法

Question

この質問が何度も出されていることは知っていますが、ぼやけたボックスを作成したので、私の質問は少し異なります. しかし、私の質問は、ぼやけたボックスの背景画像に焦点を当てています。

基本的に、次のぼやけたボックスがあります。プラグインで使用します。 デモ

このボックスをぼかすに.dany:beforeは、 の背景が親の背景と同じである必要があります。しかし、これはプラグインのスキンなので、その親がどのような背景を持つかは予測できません。そのため、親の背景または背景を見つけてプラグインの背景として設定できる方法を探しているので、ぼかし効果が機能します。

JavaScript や jQuery は気にしませんが、いずれにしても機能することが非常に重要です。

これを達成する方法はありますか？

body,
.dany:before {
  background: url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/07/background-pictures-2.jpg)
}
.dany {
  width: 600px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  background: rgba(230, 240, 255, 0.4);
}
.dany:before {
  content: '';
  position: absolute;
  z-index: -1;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  -moz-filter: blur(8px);
  -o-filter: blur(8px);
  -ms-filter: blur(8px);
}

<div class="dany">TEXT</div>