如何為背景圖像添加疊加層

Question

我想在具有背景圖像的 div 上添加一個疊加層。 div 將從 php 生成。 每個 div 都有一個背景圖像。

當我嘗試在具有背景圖像的 div 頂部添加漸變疊加時，我看不到任何變化。

我怎樣才能做到這一點？

這是我嘗試過的

html

<div class="image-box" style="background-image:url(images/stacks.jpg);"></div>
<div class="image-box" style="background-image:url(images/random.jpg);"></div>
<div class="image-box" style="background-image:url(images/laos.jpg);"></div>
<div class="image-box" style="background-image:url(images/thai.jpg);"></div>
<div class="image-box" style="background-image:url(images/phils.jpg);"></div>
<div class="image-box" style="background-image:url(images/tabs.jpg);"></div>

css

.image-box:hover{
    background-image:linear-gradient(to bottom, rgba(9, 37, 70, 0.1),rgba(9, 37, 70, 0.4),rgba(9, 37, 70, 0.8));
}

Answer 1

願這對你有幫助。 嘗試一下：

最初，我添加了一個偽元素::after它充當覆蓋層並分配與image-box相同的大小，最初它的display: none; 但在懸停時更改為display: block; 僅在懸停時應用疊加層。

 .image-box { position: relative; display: inline-block; height: 200px; width: 200px; } .image-box::after { position: absolute; top: 0; left: 0; display: none; height: 100%; width: 100%; background:linear-gradient(to bottom, rgba(9, 37, 70, 0.1),rgba(9, 37, 70, 0.4),rgba(9, 37, 70, 0.8)); content: ''; } .image-box { position: relative; display: inline-block; height: 200px; width: 200px; } .image-box:hover::after { display: block; }

 <div class="image-box" style="background-image:url(https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320__340.jpg);"></div> <div class="image-box" style="background-image:url(https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320__340.jpg);"></div> <div class="image-box" style="background-image:url(https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320__340.jpg);"></div> <div class="image-box" style="background-image:url(https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320__340.jpg);"></div> <div class="image-box" style="background-image:url(https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320__340.jpg);"></div> <div class="image-box" style="background-image:url(https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320__340.jpg);"></div>