圖像疊加背景不透明度

Question

我試圖制作圖像overlay.I，當我將dic“ overlay”設置為圖像以使其上方出現不透明性時，我會做到這一點。

我試圖制作這些代碼，但沒有任何反應

.gallery img{
width:100%;
height:auto;
display: block;
position: relative;
}

.overlay{
 opacity:1;
 width:100%;
 height: auto;
 overflow: auto;
 position: absolute;
 background-size:cover;
 background:#000;
 }

提前致謝 ！

Answer 1

您需要實際定義疊加層。 您需要將應用background-color或background-image到你的.overlay 。

Answer 2

不確定HTML的結構如何，但這應該會對您有所幫助。 根據您現有的代碼。

HTML：

<div class="gallery">
    <img src="./img/random.png" />
    <div class="overlay"></div>
</div>

CSS：

.gallery img {
  width:100%;
  height:auto;
  display: block;
  position: relative;
}

.overlay {
  width:100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: rgba(0,0,0,0.4);
}

注意：不透明度需要小於1的值才能使其具有一定的透明度。 注意CSS中的0.4 alpha / opacity設置。

還有其他解決方案，但是如果沒有您的代碼，很難根據您的特定需求對其進行定制。