0

我知道这个问题已经被问过很多次了，但是我的问题有点不同，因为我创建了一个模糊的框。但我的问题集中在模糊框的背景图像上。

所以基本上，我有以下模糊的盒子。我将在插件中使用它。 演示

为了使这个框模糊，.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>

4

0 回答 0