内联 CSS：图像显示不正确答案

【问题标题】：Inline CSS: Images Displaying Incorrectly内联 CSS：图像显示不正确
【发布时间】：2017-03-22 16:28:34
【问题描述】：

我正在尝试对以下 CSS 内联代码进行一些编辑，但遇到了问题：

我希望蓝色悬停叠加层的不透明度为 50%，以便您可以看到它后面的一些图像。
我希望悬停叠加层中的文本右对齐。
我希望图像不要相互堆叠。我尝试过使用 inline-block ，但这似乎不起作用。我希望前三个图像均匀分布在顶部，居中，另外两个位于该线下方，均匀分布，居中。就像保龄球一样。

     .container {
          position: relative;
          width: 15%;
        }
        
        .image {
          display: inline-block;
          width: 100%;
          height: auto;
          float: middle;
        }
        
        .overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          background-color: #7aa9bd;
          overflow: hidden;
          width: 100%;
          height: 0;
          transition: .5s ease;
        }
        
        .container:hover .overlay {
          height: 25px;
        
        }
                
        .text {
          font-family: "Verdana";
          white-space: nowrap; 
          color: white;
          font-size: 12px;
          position: absolute;
          overflow: hidden;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
        }

    <!DOCTYPE html>
        <html>
        <head>

        </head>
        <body>

                <center><font size="5" font face="verdana" color="black">Working to support you:</font></center>
        
        <div class="container">
          <img src="image1.png" alt="1" class="image">
          <div class="overlay">
            <div class="text">
               <strong>Sweep Up Text</strong>
           </div>
          </div>
        </div>
        
        
        <div class="container">
          <img src="image2.png" alt="2" class="image">
          <div class="overlay">
            <div class="text">
               <strong>Sweep Up Text</strong>
           </div>
          </div>
        </div>
        
        <div class="container">
          <img src="image3.png" alt="3" class="image">
          <div class="overlay">
            <div class="text">
               <strong>Sweep Up Text</strong>
           </div>
          </div>
        </div>
        
        <div class="container">
          <img src="image4.png" alt="4" class="image">
          <div class="overlay">
            <div class="text">
               <strong>Sweep Up Text</strong>
           </div>
          </div>
        </div>
        
        <div class="container">
          <img src="image5.png" alt="5" class="image">
          <div class="overlay">
            <div class="text">
               <strong>Sweep Up Text</strong>
           </div>
          </div>
        </div>
        
        </body>
        </html>

【问题讨论】：

没有图像很难想象你想要达到的效果
请不要通过破坏您的帖子为他人增加工作量。通过在 Stack Exchange (SE) 网络上发帖，您已在 CC BY-SA 3.0 license 下授予 SE 分发该内容的不可撤销的权利（即无论您未来的选择如何）。根据 SE 政策，帖子的非破坏版本是分发的版本。因此，任何破坏行为都将被撤销。如果您想了解更多关于删除帖子的信息，请参阅：How does deleting work? ...

标签： javascript html css web-site-project

【解决方案1】：

一行的堆叠取决于容器的宽度，以及它们的总和是否大于文档的宽度。

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

.image {
  display: inline-block;
  width: 100%;
  height: auto;
  float: middle;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* background-color: #7aa9bd; */
  background-color: rgba(122, 169, 189, 0.5);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 25px;

}

.text {
  font-family: "Verdana";
  white-space: nowrap; 
  color: white;
  font-size: 12px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

<center>
  <font size="5" font face="verdana" color="black">Working to support you:</font>
</center>

<div class="container">
  <img src="http://placehold.it/350x150" alt="1" class="image">
  <div class="overlay">
    <div class="text">
      <strong>Sweep Up Text</strong>
    </div>
  </div>
</div>


<div class="container">
  <img src="http://placehold.it/350x150" alt="2" class="image">
  <div class="overlay">
    <div class="text">
      <strong>Sweep Up Text</strong>
    </div>
  </div>
</div>

<div class="container">
  <img src="http://placehold.it/350x150" alt="3" class="image">
  <div class="overlay">
    <div class="text">
      <strong>Sweep Up Text</strong>
    </div>
  </div>
</div>

<div class="container">
  <img src="http://placehold.it/350x150" alt="4" class="image">
  <div class="overlay">
    <div class="text">
      <strong>Sweep Up Text</strong>
    </div>
  </div>
</div>

<div class="container">
  <img src="http://placehold.it/350x150" alt="5" class="image">
  <div class="overlay">
    <div class="text">
      <strong>Sweep Up Text</strong>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

不透明度可以通过 CSS 中的opacity 属性来控制。重新处理您的叠加以转换转换而不是高度（它更高效）并正确对齐文本。然后使用display: flex; justify-content: center; 创建行并将图像居中。还替换了您的 center 和 font 标签，因为它们在 html5 中已被弃用，您不应再使用它们。随意更改我使用的元素。

<!DOCTYPE html>
<html>

<head>
  <style>
    .row {
      display: flex;
      justify-content: center;
    }
    .container {
      position: relative;
      width: 15%;
      overflow: hidden;
    }
    
    .image {
      display: block;
      width: 100%;
      height: auto;
    }
    
    .overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #7aa9bd;
      width: 100%;
      transform: translateY(100%);
      transition: .5s ease;
      opacity: .5;
      text-align: right;
    }
    
    .container:hover .overlay {
      transform: translateY(0);
    }
    
    .text {
      font-family: "Verdana";
      white-space: nowrap; 
      color: white;
      font-size: 12px;
      padding: .5em .25em;
    }
    header {
      text-align: center;
      font-family: verdana, sans-serif;
      color: black;
    }
    header h1 {
      font-weight: normal;
    }
  </style>
</head>

<body>

  <header>
    <h1>Working to support you:</h1>
  </header>

  <main>

    <div class="row">

      <div class="container">
        <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="1" class="image">
        <div class="overlay">
          <div class="text">
            <strong>Sweep Up Text</strong>
          </div>
        </div>
      </div>


      <div class="container">
        <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="2" class="image">
        <div class="overlay">
          <div class="text">
            <strong>Sweep Up Text</strong>
          </div>
        </div>
      </div>

      <div class="container">
        <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="3" class="image">
        <div class="overlay">
          <div class="text">
            <strong>Sweep Up Text</strong>
          </div>
        </div>
      </div>
      
    </div>
    <div class="row">

      <div class="container">
        <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="4" class="image">
        <div class="overlay">
          <div class="text">
            <strong>Sweep Up Text</strong>
          </div>
        </div>
      </div>

      <div class="container">
        <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="5" class="image">
        <div class="overlay">
          <div class="text">
            <strong>Sweep Up Text</strong>
          </div>
        </div>
      </div>

    </div>

  </main>

</body>

</html>

【讨论】：