Question

我对编码还比较陌生，我正在使用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>

Answer 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>

Answer 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>。

在一个网页上的多张图像上使用叠加

2 个答案: