你必须把.car-overlay div放在一个有背景的div里面，这是因为如果一个元素有背景图像和背景颜色，那么背景颜色会出现在背景图像后面。

.card-overlay {
  background: rgba(0, 0, 0, 0.5);
}

<div class="row">
  <div class="col-md-6">
    <div style="background-image: url('https://placekitten.com/640/360');background-size:cover;">
      <div class="card-overlay">
        <div class="white-text text-center">
          <div class="card-block">
              <h3>Project title</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit
                  sed qui, dolorum!.</p>
               <a class="btn btn-primary" href="...">Read More</a>
         </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果你不想改变你的HTML结构，你可以使用CSS3的多背景渐变，而不是背景色，因为你不能层背景色。
一个二个一个一个

中央支助系统

.container { background-color: #000000;}
.container img { opacity: 0.2; }

超文本标记语言

<div class="container">
<img src="#">
</div>

Working Fiddle Example Here...

您可以使用after/before执行此操作

.card-overlay{
  position: relative;
}
.card-overlay:after {
  content:'';
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  background: rgba(0, 0, 0, 0.5);
}

试试这个：

.card-overlay {position:relative;}
.card-overlay:before{    background: rgba(37, 35, 35, 0.07);    position: absolute;    height: 100%;    left: 0;    top: 0;    margin: 0;    width: 100%;    content: ' ';    display: block;}