如何使用 CSS 在图像上应用叠加层？答案

【问题标题】：How to apply an overlay on an image using CSS?如何使用 CSS 在图像上应用叠加层？
【发布时间】：2022-12-09 15:49:04
【问题描述】：

我尝试这样做，但它不起作用。如何叠加在图像上。

<div class="banner_img">  
    <img src="images/catimage.jpg" alt="It is a cat image" width="300px" height="200px">  <br/> 
</div>

【问题讨论】：

不是修复，但请注意 <br> 标签不使用也不需要结束斜杠，并且在任何 HTML 规范中从来没有。

标签： overlay overlap overlapping

【解决方案1】：

编辑代码以满足您的需要。

CSS 和 HTML：

* {box-sizing: border-box;}
    
    .container {
      position: relative;
      width: 50%;
      max-width: 300px;
    }
    
    .img{
      display: block;
      width: 100%;
      height: auto;
    }
    
    .youroverlaydiv{
      position: absolute; 
      bottom: 0; 
      background: rgb(0, 0, 0);
      background: rgba(0, 0, 0, 0.5); /* Black see-through */
      color: #f1f1f1; 
      width: 100%;
      transition: .5s ease;
      opacity:0;
      color: white;
      font-size: 20px;
      padding: 20px;
      text-align: center;
    }
    
    .container:hover .youroverlaydiv{
      opacity: 1;
    }

 <div class="container">
  <div class="banner_img">  
        <img src="https://images.unsplash.com/photo-1524749292158-7540c2494485?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="It is a cat image" width="300px" height="200px" class="img"> 
        <div class="youroverlaydiv">This is your overlay.</div>
  </div>

 </div>

【讨论】：