html - 如何在不转换内容的情况下将悬停转换应用于 CSS 背景图像？

Question

我正在尝试申请 this sort of overlay effect到悬停时的背景图像。但是，我只想将此转换应用于背景图像，而不是 div 中的文本或其他内容。

这是我目前的代码，没有任何悬停效果 - 上面 w3schools 链接中的方法似乎不合适:

.background-image {
  background: url('http://placehold.it/350x200') no-repeat center;
}

.about-text {
  color: #ffffff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="col-md-6 text-center background-image overlay">
  <div class="about-text">
    <p>Some descriptive text here. Blah blah blah.</p>
    <p class="text-center"><a class="btn btn-primary" href=""> Button </a></p>
  </div>
</div>

Answer 1

这是你想要的吗？ See this fiddle

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="col-md-6 text-center background-image overlay">
  <div class="background"></div>
  <div class="about-text">
    <p>Some descriptive text here. Blah blah blah.</p>
    <p class="text-center"><a class="btn btn-primary" href=""> Button </a></p>
  </div>
</div>

CSS .背景图片{

  height: 200px;
}
.background { 
  background: url('http://lorempicsum.com/futurama/350/200/1') no-repeat center;
  position: absolute; width: 350px; height: 200px; 
}

.about-text {
  color: #ffffff;
  position: absolute;
    height: 200px;
    width: 350px;
 transition: all 0.5s;
}

.background-image:hover .about-text { background: #333}