1. 首頁
  2. 問答
  3. 內聯CSS：圖像顯示不正確

內聯CSS：圖像顯示不正確

2017-03-22 272 views
0

我試圖做一些編輯以下CSS內嵌代碼，但我遇到了問題：內聯CSS：圖像顯示不正確

  1. 我想藍色的懸停覆蓋的不透明度是50％，所以你可以看到它背後的一些圖像。

  2. 我希望懸停疊加層內的文字對齊。

  3. 我想圖像不能堆疊在一起。我試過使用內聯塊，並且似乎沒有工作。我希望前三個圖像均勻地分佈在頂部，居中，另外兩個位於該線下方，均勻分佈，居中。像保齡球。

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

來源

2017-03-22 M.C. Fav

+0

它很難沒有你想達到什麼樣的圖像可視化 –

回答

0

在一行中的堆疊將取決於容器的寬度，並且如果所有這些的總和大於文檔的寬度更大。

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

來源

2017-03-22 16:44:27

0

不透明度可以用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>

來源

2017-03-22 16:47:57

相關問題

 相關問題