HTML和CSS模式框褪色背景问题

我在我的网站上使用这个由html和css制作的模式框。它的主要部分很好，但我有一个背景褪色的问题

它只会以某种方式淡出出现在代码框位置上方的站点部分的背景。我使用ID来标识站点的各个部分，这是一个单页站点，用于菜单中的链接。包含模式框的部分下方的所有部分不会褪色

下面是一些代码：

    <div class="wrapper">

            <a href="#modal" class="btn go">            
            <img src="img/i3.1.jpg" alt="image" />
            </a>

 <div id="modal">
    <link href="css/modal.css" rel="stylesheet">
    <div class="modal-content">
        <div class="header">
            <h2>Modal Heading</h2>
        </div>
        <div class="copy">
            <p>Sample text in modal</p>
        </div>
        <div class="cf footer">
            <a href="#team" class="btn">Close</a>
        </div>
    </div>
    <div class="overlay"></div>
</div>

你们能帮我弄清楚吗

多谢各位

---

/乔纳斯

你能用小提琴演奏吗？

#modal {
left:50%;
margin:-250px 0 0 -40%;
opacity: 0;
position:absolute;
top:-50%;
visibility: hidden;
width:80%;
box-shadow:0 3px 7px rgba(0,0,0,.25);
box-sizing:border-box;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

#modal:target {
    opacity: 1;
    top:50%;
    visibility: visible;
}

#modal .header,#modal .footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}

#modal .footer {
    border:none;
    border-top: 1px solid #e7e7e7;
    border-radius: 0 0 5px 5px;
}
#modal h2 {
margin:0;
}
#modal .btn {
float:right;
}
#modal .copy,#modal .header, #modal .footer {
padding:15px;
}
.modal-content {
background: #f7f7f7;
position: relative;
z-index: 20;
border-radius:5px;
}
#modal .copy {
background: #fff;
}

#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}