通过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 -->