Question

当我将filter：blur应用于容器（id =“vaaSaleAlertsContainer”）时，弹出窗口变得模糊而不是背景内容。我想在显示弹出窗口时模糊背景内容。

iframe弹出窗口和容器结构代码：

<div id="vaaSaleAlertsContainer" style="position: fixed; height: 100%; width: 100%; background: rgba(176, 224, 230, 0.6); z-index: 100; opacity: 1.0375; display: block;">
  <span style="font-size: 36px; color: black; float: right; z-index: 101; margin-right: 17.0%; cursor: pointer;">×</span>
  <iframe id="vaaSaleAlerts" style="width: 850px; height: 500px; margin-left: -437px; margin-top: -60px; display: block; opacity: 1.0325;" src="//www.surveymonkey.com/r/Preview/?sm=3dkHz6PiHV6N5bw4fN2TwF2duwIk0ODvH_2FxpTqAOvifV47DxfX8nBHCSvjDRF2gi"></iframe>
</div>

Answer 1

使用此结构

<div class="">
    <div style="filter:blur(2px)">
        ALL YOUR CONTENT
    </div>
    <div >
        <iframe src="http://127.0.0.1:8000/"></iframe>
    </div>
</div>

您的iframe src应该是您自己网站上的网址

Answer 2

使用Javascript：

document.getElementsByClassName("container")[0].style.WebkitFilter = 'blur(4px)';
document.getElementsByClassName("container")[0].style.filter= 'blur(4px)';

使用CSS：

.container.blur{
filter: 'blur(4px)';
-webkit-filter: 'blur(4px)';
}

Answer 3

#vaaSaleAlertsContainer仅包含弹出窗口吗？如果是，则可以使用backdrop-filter CSS属性。

CSS：

#vaaSaleAlertsContainer {
    backdrop-filter: blur(10px);
}

如何模糊iframe弹出窗口的背景

3 个答案:

CSS：