懸停圖像上的顏色疊加

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

但是，當我將鼠標懸停在上面時，我想要這樣的東西：

因此，當我將鼠標懸停在盒子上時，我想要一個橙色的覆蓋色。 我還希望整個框都可單擊，而不僅僅是a元素。

但是我真的對圖像顏色疊加停留不動。 我也知道在元素中放置元素不是很好。 那么，如何使其完全可點擊？

Answer 1

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

這里的重要部分是.about > * { position: relative; } .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內添加一個overlay div，然后使用我下面提到的css屬性就使該div絕對。

如果圖像的高度不固定，則可能必須使用Javascript動態計算高度。

在此處找到演示

注意：演示中的文本重疊顯示，因為我使用了已經具有文本的線框圖像。 在正確的映像上實現它應該不會有問題。

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是背景的透明度。 有點像這樣：

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

.about:hover {
    background: rgba(39,62,84,0.82);
}

Answer 4

您可以通過使用CSS混合模式“ background-blend-mode：乘法;”來完成此操作 和一個懸停選擇器。

 .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文本和h2才能使其正常工作）： https : //jsfiddle.net / vwody2Lj /

 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); } 

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

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>