Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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背景图像？

2 个答案: