通过 CSS 应用透明叠加层

Question

This section of my website has an image for the background. I am trying to create a transparent overlay at the top of this section as highlighted below in red. I am trying to do this through CSS and not actually applying the transparent overlay on the actual image itself. I made it red so it's easier to see, but the actual color will be the same as the two boxes below. How can I create a transparent overlay that only covers a certain portion of the iamge?

<!-- 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

One suggestion would be to add/update your CSS like this

#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;
}

Code sample

 #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 -->