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

【问题标题】：How can I apply a hover transformation to a CSS background image without transforming the content?如何在不转换内容的情况下将悬停转换应用于 CSS 背景图像？
【发布时间】：2017-08-19 20:36:32
【问题描述】：

我正在尝试将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>

【问题讨论】：

标签： html css hover css-transforms

【解决方案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 .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}

【讨论】：

完美，这正是我想要达到的目标，而且比我预期的要简单得多。

【解决方案2】：

我不确定我是否明白你在问什么，我想它是这样的：

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

【讨论】：

是的 - 这几乎正是我所追求的，谢谢，但是我正在尝试做一个需要改变不透明度的淡入叠加......并且努力让我的头脑围绕它。