如何在不变换内容的情况下对 CSS 背景图像应用悬停变换？

Question

我正在尝试将 this sort of overlay effect 应用于悬停时的背景图片。但是我只想将此转换应用于背景图像，而不是 div.

中的文本或其他内容

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

.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

我不确定我是否理解你的问题，我想是这样的：

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

.overlay {
  transition: background-position 250ms ease-in-out;
}

.overlay:hover {
  background-position: center -100%;
}

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

这是你想要的吗？ 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 .background-image {

  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}

如何在不变换内容的情况下对 CSS 背景图像应用悬停变换？

How can I apply a hover transformation to a CSS background image without transforming the content?

html

css

hover

css-transforms