在背景图像上叠加 css 图像答案

【问题标题】：css image overlay on background image在背景图像上叠加 css 图像
【发布时间】：2017-03-10 08:52:42
【问题描述】：

所以我正在尝试在我的网站上使用叠加层，我一直在看教程，但现在我已经到了不知道自己做错了什么的地步。

<head>
  <link rel="stylesheet" href="css/venues.css">
</head>

<section class="alt-section">

  <h2> Places we've played.</h2>

  <div class="thumb-container">
    <a href ="" class="thumb-unit">
      <div class="thumb-overlay">
        <strong>Bar 42</strong>
        <div class="zoom-icon">
        </div>
      </div>
    </a>

    <a href ="" class="thumb-unit">
      <div class="thumb-overlay">
        <strong>The Prince Albert</strong>
        <div class="zoom-icon">
        </div>
      </div>
    </a>
  </div>


</section>

css 是..

.alt-section{
  background-color: #e6e6e6;
  margin: 0 auto;
}

.alt-section h2{
  padding:50px;
  color: #e1c184;
  font-family: Spliffs;
  text-align: center;
  font-size: 35;
}

.alt-section a{
  font-family: sans-serif;
  padding:10px;
  font-size: 18px;
  text-decoration: none;
  color: #cd9732;
}

.alt-section a:hover{
  color: #e1c184;
}

.thumb-container{
  max-width: 960px;
  margin: 0px auto;
  padding-bottom: 100px;
  overflow: hidden;

}

.thumb-unit{
  display:block;
  width: 150px;
  float:left;
  position: relative;
  height: 150px;



  background-image: url(http://i.imgur.com/3VTqQ8M.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.thumb-overlay{
  position:absolute;
  top:100%;
  left:0px;
  right:0px;
  bottom:null;
  height:100%;
  background:rgba(205,151,50,0.5);

}

.thumb-overlay:hover{
  position:absolute;
  top:0%;
  left:0px;
  right:0px;
  bottom:null;
  background:rgba(205,151,50,0.5);
  transition: linear;
  transition-duration: 0.5s;

}

youtube 视频让我达到了他们已经完成的地步，但我仍然坚持这一点。 https://www.youtube.com/watch?v=ygvo1_kqVUg

所以我的实际问题是与锚标记上的命中框的大小有关，我似乎无法增加大小，所以当我将鼠标悬停在它上面时，会弹出叠加层。

我已将溢出恢复为可见，因此您可以看到我的问题，但是当我滚动照片时，覆盖不会弹出它，只有当我将鼠标悬停在文字上时才会出现。

【问题讨论】：

标签： html css image background-image overlay

【解决方案1】：

#element-with-background-image {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
 url("https://s-media-cache-ak0.pinimg.com/564x/b9/ea/bd/b9eabd96be305e1ee9fe5b6ca3fea673.jpg");
}
 
#color-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: black;
   opacity: 0.6;

<div id="element-with-background-image">
  <div id="color-overlay"></div>
   ...
</div>

【讨论】：