通过CSS应用透明叠加层

Question

我网站的这一部分有背景图片。我正在尝试在此部分的顶部创建一个透明的叠加层，如下面以红色突出显示。我试图通过CSS实现这一点，而不是实际在实际图像本身上应用透明覆盖。我把它变成红色所以它更容易看到，但实际颜色将与下面的两个框相同。如何创建仅覆盖某个部分的透明覆盖图？

<!-- Contact -->
<div id="contact">
    <div class="container">
        <h1><strong>Contact Summit</strong></h1>
        <hr>

        <div class="row">

            <div class="col-md-6">
                <div class="con-padded">
                <form name="contactform" method="post" action="index.php" class="form-vertical" role="form">
                    <div class="form-group">
                        <label for="inputName" class="control-label">Name</label>
                            <input type="text" class="form-control input-md" id="inputName" name="inputName" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail1" class="control-label">Email</label>
                            <input type="text" class="form-control input-md" id="inputEmail" name="inputEmail" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="inputSubject" class="control-label">Subject</label>
                            <input type="text" class="form-control input-md" id="inputSubject" name="inputSubject" placeholder="Subject">
                    </div>
                </div>
            </div> <!-- end col-md-6 -->

            <div class="col-md-6">
                <div class="con-padded">
                    <div class="form-group">
                        <label for="inputPassword1" class="control-label">Details</label>
                        <textarea class="form-control" rows="5" id="inputMessage" name="inputMessage" placeholder="Message..."></textarea>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default pull-right">
                            Send
                        </button>
                    </div>
                </form>
                </div>
            </div> <!-- end col-md-6 -->

        </div> <!-- end row -->

    </div> <!-- end container -->
</div> <!-- end contact -->

/*==================
CONTACT
===================*/

#contact{
background: url('../img/summit.jpg') no-repeat center center fixed;
background-size: 100% auto;
color: #FCFFF5; /*white*/

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

padding-top: 30px;
}

#contact h1 {
color: #FCFFF5; /*white*/
text-align: center;
}

#contact .col-md-6 {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
margin: 0 auto;
}

.con-padded {
background-color: #282828; /*black*/
padding-top: 30px;
padding-bottom: 40px;
padding-left: 25px;
padding-right: 25px;

opacity: 0.93;
-webkit-opacity: 0.93;
-moz-opacity: 0.93;

height: 310px;
}

Answer 1

一个建议是像这样添加/更新你的CSS

#contact {
  background: url('../img/summit.jpg') no-repeat center center fixed;
  background-size: 100% auto;
  color: #FCFFF5; /*white*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  padding-top: 30px;
  position: relative;
}
#contact:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 110px;
  background-color: rgba(255,0,0,0.4); 
}

#contact h1 {
  color: #FCFFF5; /*white*/
  text-align: center;
  position: relative;
}

代码示例

#contact {
  background: url('http://lorempixel.com/600/300/nature/8/') no-repeat center center fixed;
  background-size: 100% auto;
  color: #FCFFF5; /*white*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  padding-top: 30px;
  position: relative;
}
#contact:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 110px;
  background-color: rgba(255,0,0,0.4); 
}

#contact h1 {
  color: #FCFFF5; /*white*/
  text-align: center;
  position: relative;
}

#contact .col-md-6 {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
margin: 0 auto;
}

.con-padded {
background-color: #282828; /*black*/
padding-top: 30px;
padding-bottom: 40px;
padding-left: 25px;
padding-right: 25px;

opacity: 0.93;
-webkit-opacity: 0.93;
-moz-opacity: 0.93;

height: 310px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Contact -->
<div id="contact">
    <div class="container">
        <h1><strong>Contact Summit</strong></h1>
        <hr>

        <div class="row">

            <div class="col-md-6">
                <div class="con-padded">
                <form name="contactform" method="post" action="index.php" class="form-vertical" role="form">
                    <div class="form-group">
                        <label for="inputName" class="control-label">Name</label>
                            <input type="text" class="form-control input-md" id="inputName" name="inputName" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label for="inputEmail1" class="control-label">Email</label>
                            <input type="text" class="form-control input-md" id="inputEmail" name="inputEmail" placeholder="Email">
                    </div>
                    <div class="form-group">
                        <label for="inputSubject" class="control-label">Subject</label>
                            <input type="text" class="form-control input-md" id="inputSubject" name="inputSubject" placeholder="Subject">
                    </div>
                </div>
            </div> <!-- end col-md-6 -->

            <div class="col-md-6">
                <div class="con-padded">
                    <div class="form-group">
                        <label for="inputPassword1" class="control-label">Details</label>
                        <textarea class="form-control" rows="5" id="inputMessage" name="inputMessage" placeholder="Message..."></textarea>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default pull-right">
                            Send
                        </button>
                    </div>
                </form>
                </div>
            </div> <!-- end col-md-6 -->

        </div> <!-- end row -->

    </div> <!-- end container -->
</div> <!-- end contact -->