在一个网页上的多个图像上使用叠加层答案

【问题标题】：Using overlays on multiple images on one web page在一个网页上的多个图像上使用叠加层
【发布时间】：2019-10-23 23:15:48
【问题描述】：

我对编码比较陌生，我正在使用 codepen.io 来变得更好，所以请忽略实际内容，它需要练习。无论如何，我正在尝试在一页上的图像上进行多次叠加。我似乎无法弄清楚如何让叠加层出现在他们各自的图像上。

这里是 codepen 链接：https://codepen.io/ToxicCookie/pen/RmXYLv?editors=1000

<html>
  <head>
    <style>
      * {
        background-color: #d7c2fc;
        font-family: Courier New, monospace;
      }
      #title {
        text-align: Center;
        font-size: 50px;
      }
      .container {
       position: relative;
       width: 50%;
       }
      .image {
       display: block;
       width: 300px;
       height: 250px;
       }
      .overlay {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       height: 250px;
       width: 300px;
       opacity: 0;
       transition: .5s ease;
       background-color: #008CBA;
       }
      .container:hover .overlay {
       opacity: 1;
       }
      .text {
       color: white;
       font-size: 20px;
       position: absolute;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
       text-align: center;
       background-color: #008CBA;
       }
      #animals {
        position: fixed;
      }
      #earth{
        position: fixed;
        left: 320px;
      }
      #body{
        position: fixed;
        left: 630px;
      }
    </style>
  </head>
  <body>
    <h1 id= "title"> Why be Vegan?</h1>
    <div class="container">
    <img id="animals" src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg" alt="animals" class="image">
  <div class="overlay">
    <div class="text">Animals</div>
  </div>
</div>
    <div class="container">
    <img id="earth" src="https://ih1.redbubble.net/image.540939652.0382/flat,550x550,075,f.u2.jpg" alt="earth" class="image" >
  <div class="overlay">
    <div class="text">Earth</div>
  </div>
</div>
    <div class="container">
    <img id="body" src="https://www.uuwaco.org/wp-content/uploads/2018/09/veggieheart.jpg" alt="body" class="image">
  <div class="overlay">
    <div class="text">Body</div>
  </div>
</div>
  </body>

【问题讨论】：

认为这是被问到的。 stackoverflow.com/questions/21086385/…
@TemaniAfif 你最好不要用答案替换代码。不？ :)
@ItangSanjana 我没有用答案代替。我将 codepen 中的代码复制到问题中，因为我们需要问题中的代码，而不是外部链接。 OP可以轻松编辑codepen来修复问题，问题将变得无用
@TemaniAfif 我明白了。请原谅我的误解:)

标签： javascript html css

【解决方案1】：

您正在将图像设置为position:fixed，这是罪魁祸首。删除它并改为容器inline-block：

* {
  background-color: #d7c2fc;
  font-family: Courier New, monospace;
}

#title {
  text-align: Center;
  font-size: 50px;
}

.container {
  position: relative;
  display: inline-block;
}

.image {
  display: block;
  width: 300px;
  height: 250px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
  width: 300px;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: #008CBA;
}

<h1 id="title"> Why be Vegan?</h1>
<div class="container">
  <img id="animals" src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg" alt="animals" class="image">
  <div class="overlay">
    <div class="text">Animals</div>
  </div>
</div>
<div class="container">
  <img id="earth" src="https://ih1.redbubble.net/image.540939652.0382/flat,550x550,075,f.u2.jpg" alt="earth" class="image">
  <div class="overlay">
    <div class="text">Earth</div>
  </div>
</div>
<div class="container">
  <img id="body" src="https://www.uuwaco.org/wp-content/uploads/2018/09/veggieheart.jpg" alt="body" class="image">
  <div class="overlay">
    <div class="text">Body</div>
  </div>
</div>

【讨论】：

【解决方案2】：

figure {
  position: relative;
  max-width: 222px;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

figcaption {
  align-items: center;
  background-color: whitesmoke;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: 0.5s ease;
}

figure:hover figcaption {
  opacity: 0.75;
}

<figure>
  <img src="https://live.staticflickr.com/7291/11910205046_d9844787b2_b.jpg"
       alt="The beautiful MDN logo.">
  <figcaption>Animal</figcaption>
</figure>

注意事项：

尽可能使用语义 HTML 元素。即<figure> & <figcaption>
将CSS相对位置添加到绝对/固定位置的父节点。
尽可能让图像响应height: auto; max-width: 100%。最好也使用媒体或图像源元素<source>。

【讨论】：