Question

我的横幅看起来像这样：

我的HTML看起来像这样：

<div class="about centered" style="background: url('/img/about-bg1.jpg') no-repeat center center;">
    <h2 class="head">Solden bij Lattoflex</h2>
    <a href="#" class="about__more">MEER INFO</a>
</div>

我的CSS看起来像这样：

.about {
    margin-bottom: 10px;
    background-size: cover;
    padding-top: 90px;
    padding-bottom: 62px;
    text-align: center;
}

.centered {
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
}

但是当我把它悬停在它上面时，我希望有这样的东西：

当我将鼠标悬停在盒子上时，我想要一个橙色的叠加颜色。我还想让整个框可以点击，而不仅仅是一个元素。

但是我真的坚持悬停在图像颜色叠加上。我也知道将元素放在元素中并不好。那么如何让它完全可点击？

Answer 1

使用伪元素，例如::before。

这里的重要部分是.about > * { position: relative; }规则，它将内部元素保持在伪的顶部。

.about {
  margin-bottom: 10px;
  background-size: cover;
  
  padding-top: 90px;
  padding-bottom: 62px;
  text-align: center;
}
.centered {
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
}
.about > * {
  position: relative;
}
.about:hover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #f00;
  opacity: 0.7;
  mix-blend-mode: multiply;
}
.about:hover > * {
  color: white;
}

<div class="about centered" style="background: url(https://i.stack.imgur.com/tVDnT.jpg) no-repeat center right;">
  <h2 class="head">Solden bij Lattoflex</h2>
  <a href="#" class="about__more">MEER INFO</a>
</div>

更新

要使整个框可点击，只需将锚移动到所有内容之外，例如在其位置使用span

.about {
  margin-bottom: 10px;
  background-size: cover;
  
  padding-top: 90px;
  padding-bottom: 62px;
  text-align: center;
}
.centered {
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
}
.about > * {
  position: relative;
}
.about:hover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #f00;
  opacity: 0.7;
  mix-blend-mode: multiply;
}
.about__more {
  text-decoration: none;
}
.about__more .head {
  color: black;
}
.about__more span {
  text-decoration: underline;
}
.about:hover > * {
  color: white;
}

<a href="#" class="about__more">
  <div class="about centered" style="background: url(https://i.stack.imgur.com/tVDnT.jpg) no-repeat center right;">
    <h2 class="head">Solden bij Lattoflex</h2>
    <span class="about__more">MEER INFO</span>
  </div>
</a>

Answer 2

<强>逻辑：只需在图像持有者div中添加一个叠加div，并使用css属性将叠加div设为绝对值，如下所述。

如果图像的高度未修复，则可能必须使用Javascript动态计算高度。

找到demo here

注意：演示中的文字显示重叠，因为我使用过已有文字的线框图像。在右图上实现它应该不是问题。

<强> HTML：

<div class="about centered" style="background: url('/img/about-bg1.jpg') no-repeat center center;">
    <h2 class="head">Solden bij Lattoflex</h2>
    <a href="#" class="about__more">MEER INFO</a>
    <div class="dimension overlay"><div>
</div>

<强> CSS：

.about {
    margin-bottom: 10px;
    background-size: cover;
    padding-top: 90px;
    padding-bottom: 62px;
    text-align: center;
}

.centered {
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
}

.dimension{
    width: 100%;
    height: 240px;
}
.overlay{
    z-index: 1;  
    position: absolute;
    top: 0;    
}
.overlay:hover{ 
    background-color: rgba(255,100,0,0.62);
}

Answer 3

您应该能够使用背景图像在div的子元素上使用背景。 0.82是背景的透明度。有点像这样：

gem "my-gem", git: "https://github.com/Loschcode/my-gem.git", branch: "master", tag: "v0.2.2"

Answer 4

您可以使用css混合模式“background-blend-mode：multiply;”来完成此操作。和悬停选择器。

.about {
    margin-bottom: 10px;
    background-image: url('https://i.stack.imgur.com/cJ7gy.png');
    background-color: red;
    background-size: cover;
    padding-top: 90px;
    padding-bottom: 62px;
    text-align: center;
  
}

.centered {
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
}

.about:hover {
  background-blend-mode: multiply;
}

<div class="about centered">
    <h2 class="head">Solden bij Lattoflex</h2>
    <a href="#" class="about__more">MEER INFO</a>
</div>

Answer 5

在这里，不需要js（必须猜测颜色，所以你需要重做那个，我必须隐藏实际的a-text和h2才能正常工作）：{{ 3}}

＆＃13;

h2 {
  color: transparent;
  display: none;
}
.about {
    background-size: cover;
    text-align: center;
    height: 15em;
}

.centered {
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
}
.about.centered a {
  color: transparent;
  display: block;
  height: 100%;
}
.about.centered a:hover {
  background: rgba(255,0,0,0.3);
}

＆＃13;

<div class="about centered" style="background: url('https://i.stack.imgur.com/cJ7gy.png') no-repeat center center;">
    <h2 class="head">Solden bij Lattoflex</h2>
    <a href="#" class="about__more">MEER INFO</a>
</div>

＆＃13;

Answer 6

伙计，我会告诉你制作两张图片并使用整个div的'a'标签，例如：

<a href="#" class="about__more about centered" id="id-for-some-js-event">
   <h2 class="head">Solden bij Lattoflex</h2>
   MEER INFO
</a>

<style>
 .about {
   margin-bottom: 10px;
   background-size: cover;
   padding-top: 90px;
   padding-bottom: 62px;
   text-align: center;
   background-repeat:  no-repeat center center;
   background-position: center;
   background-image:  url('/img/about-bg1.jpg');
   transition: all .3s ease-in;
   /*  transition faz com que a mudança não seja bruta...  */
  }

 .about:hover {
   background-image:  url('/img/about-bg1-red.jpg');
 }
 .centered {
   margin: 0 auto;
   max-width: 1200px;
   position: relative;
  }

</style>

悬停图像上的颜色叠加

6 个答案: