Question

当我单击图像并弹出时，我试图使背景模糊。我已经在模糊页面的一部分了。但是，您可以看到该部分之外的任何内容都不会模糊。

CSS

.content2#blur.active{ 
filter: blur(20px);
pointer-events: none;
user-select: none;}

#popup{  /*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}

#popup.active{ 
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}

HTML

<section class="port" id="pLink">
    <div class="heading" id="blur">
        <h2>Title</h2>
        <p>Description.</p>
    </div>
    <div class="content2" id="blur">
        <div class="pBox">
        <a href="#" class="anchor" onclick="toggle()" id="img-1">
            <img src="../mywebsite/img/bp.jpg">
            <div class="overlay">
            <h5>Image Description</h5>
            </div>
        </a>
        </div>
   </div>
   <div id="popup">
        <a href="#" class="anchor" onclick="toggle()">
        <img src="../mywebsite/img/bp.jpg" class="img-1">
   </div>
</section>

<div class="footer">
    <p>Copyright</p>
</div>

JavaScript

function toggle(){
var blur = document.getElementById('blur');
blur.classList.toggle('active');
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}

我尝试将相同的id="blur"添加到页脚中，但问题是它仅适用于一个<div>。我还尝试为让`class =“ footer”添加一个单独的CSS代码，但这没用。

.footer#blur.active{ 
 filter: blur(20px);
 pointer-events: none;
 user-select: none;}

我还尝试将id标记移至该部分，但这只会使标题模糊，而不会模糊其余部分。

Answer 1

您要做的就是向单击图像时想要获得效果的任何元素添加“模糊”类。

我所做的更改：

将 CSS #blur更改为.blur

JS -该函数采用类.blur的所有元素，并添加或删除类.active

HTML -为所有需要模糊的元素添加了.blur类。

在一个文档中，您可以有多个具有相同名称的类，但只能有一个具有唯一ID的元素！这就是我将blur从ID更改为CLASS

的原因

function toggle() {
    var blur = document.getElementsByClassName('blur');
   
    for (var i = 0; i < blur.length; i++) {
        blur[i].classList.toggle('active');
    }

    var popup = document.getElementById('popup');
    popup.classList.toggle('active');
}

.blur.active {
    filter: blur(2px);
    pointer-events: none;
    user-select: none;
}

#popup {
    /*NEW*/
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    padding: 50px;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
}

#popup.active {
    width: 650px;
    top: 53%;
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
}

<section class="port" id="pLink">
    <div class="heading blur">
        <h2>Title</h2>
        <p>Description.</p>
    </div>
    <div class="content2 blur">
        <div class="pBox">
            <a href="#" class="anchor" onclick="toggle()" id="img-1">
                <img src="https://blog.54ka.org/wp-content/uploads/2020/09/horse-galloping-close-up-action-photography_by_54ka-165x165.jpg">
                <div class="overlay">
                    <h5>Image Description</h5>
                </div>
            </a>
        </div>
    </div>
    <div id="popup">
        <a href="#" class="anchor" onclick="toggle()">
            <img src="https://blog.54ka.org/wp-content/uploads/2012/07/horses_XI_01_by_54ka.jpg" class="img-1">
    </div>
</section>


<div class="footer blur">
    <p>Copyright</p>
</div>

弹出图像时模糊背景

1 个答案: