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示例

移动我的联系表单以覆盖背景图像

1 个答案: