html - 将我的联系表移到背景图片上

Question

您好，我刚开始学习如何编码，并且遇到了让我的联系人位于背景图像上方并向表单背景添加一些不透明度的问题。

现在，我的表单位于背景图片下方 - 我尝试移动代码，但似乎不起作用。

HTML:

<!--Feature Contact Masthead Image-->
    <div class="container-fluid">
            <div class="row feature">
                <img src="images/map.jpg" alt="Map">
                <div class="feature-text col-xs-12 col-md-8 col-lg-6 col-md-offset-2 col-lg-offset-3">
                    <p>CONTACT US</p>
                </div><!--END FEATURE TEXT-->                
            </div><!--END ROW FEATURES-->  
        </div><!--END CONTAINER FLUID-->
    <!--Contact Section-->
    <section id="contact">
            <div class="container">
                <div class="row">


                <!--Form Section-->       
                <div class="col-sm-6 col-sm-offset-3">
                    <div class="well" style="margin-top: 10%;">
                    <h3>Send Us A Message</h3>
                    <form role="form" id="contactForm" data-toggle="validator" class="shake">
                        <div class="row">
                            <div class="form-group col-sm-6">
                                <label for="name" class="h4">Name</label>
                                <input type="text" class="form-control" id="name" placeholder="Enter your full name" required data-error="NEW ERROR MESSAGE">
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group col-sm-6">
                                <label for="email" class="h4">Email</label>
                                <input type="email" class="form-control" id="email" placeholder="Enter email" required>
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="message" class="h4 ">Message</label>
                            <textarea id="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
                            <div class="help-block with-errors"></div>
                        </div>
                        <button type="submit" id="form-submit" class="btn btn-success btn-lg pull-right ">Submit</button>
                        <div id="msgSubmit" class="h3 text-center hidden"></div>
                        <div class="clearfix"></div>
                    </form>
                    </div>
                </div>
                </div>
                </body> <!--EndForm Section-->

             </div>
            </div>
        </section><!--End Contribute Section-->  

Answer 1

我想这就是你想要的，你可以使用伪元素来添加背景并为其添加不透明度。

    body {
      display: table;
      height: 100%;
      position: relative;
      width: 100%;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    body:after {
      content: '';
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background: url(https://upload.wikimedia.org/wikipedia/commons/3/3a/Sunset_in_Coquitlam.jpg) no-repeat center center fixed; 
/* ADD YOUR OWN BACKGROUND */
      background-size:100% auto;
      opacity: 0.5;
    }

这是 CODEPEN例子