Question

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

我希望蓝色悬停叠加层的不透明度为50％，这样你就可以看到它背后的一些图像。
我希望悬停叠加层中的文字对齐。
我希望这些图像不会叠加在一起。我尝试过使用内联块，但似乎没有用。我希望前三个图像均匀地分布在顶部，居中，另外两个图像在该线下方，均匀分布，居中。像保龄球一样。

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

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

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

内联CSS：图像显示不正确

2 个答案: