html - 谷歌地图在 html 的联系表格后面变灰

Question

我目前在一个包含联系表格的网站上工作。如果我可以使用谷歌地图作为背景，但随后变成灰色而不是白色页面，那就太好了。

我尝试了一些事情，但最终还是这样:

如您所见，我只有 1/10 的 div 用于显示 Google map 。

我尝试过的:

<div id="tf-contact" class="text-center" >
<div class="map">
    <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginwidth="0"
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d79109.96871665918!2d5.295447749999999!3d51.711330000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c6ee37ad3edd37%3A0x400de5a8d1e7c50!2s's-Hertogenbosch!5e0!3m2!1snl!2snl!4v1410603286022"
            style="border:0">
    </iframe>
    <div class="container">

        <div class="row">
            <div class="col-md-8 col-md-offset-2">

                <div class="section-title center">
                    <h2>Neem gerust <strong>contact op</strong></h2>

                    <div class="line">
                        <hr>
                    </div>
                    <div class="clearfix"></div>
                    //not important for the question
                    </div>

                    <form>
                        //not important for the question
                    </form>
            </div>
        </div>

    </div>
</div>

所以我想要这样的东西:

CSS 是:

/* Contact Section */
#tf-contact{
padding: 80px 0;
}

label {
float: left;
font-size: 12px;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
}
#tf-contact .form-control {
display: block;
width: 100%;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 2px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: none;
-o-transition: none;
transition: none;
}

#tf-contact .form-control:focus {
border-color: inherit;
outline: 0;
-webkit-box-shadow: transparent;
box-shadow: transparent;
}

button.btn.tf-btn.btn-default {
float: right;
background: #FCAC45;
border: 0;
border-radius: 0;
padding: 10px 40px;
color: #ffffff;
text-transform: uppercase;
}

.btn:active, .btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}

.btn:focus, 
.btn:active:focus, 
.btn.active:focus, 
.btn.focus, 
.btn:active.focus, 
.btn.active.focus {
 outline: thin dotted;
 outline: none;

}

Answer 1

好的，我认为对您来说最好的选择是去研究 Z-Index。这样您就可以将每个元素放在一个单独且不同的层上。

http://www.w3schools.com/cssref/pr_pos_z-index.asp