CSS 筆記 - 金魚系列 09 -方塊酥圖片頁面

這次來切一個相簿牆面， Amos 教學稱之為方塊酥切版，滿有意思的。

學習重點

float 浮動教學
波浪符選取器教學
RGB 網頁色彩教學
relative 定位教學
absolute 定位教學

float 重出江湖

有了 flex 聖品後，就鮮少使用 float，但有些時機還是需要使用 float。

HTML 架構

相較於之前的內容，本次練習架構非常單純，就只有圖片文字而已。

<div class="item">
  <img src="https://picsum.photos/400/400?random=20" />
  <div class="text">
    <h2>學習重點有這些</h2>
    <p>
      float 浮動教學(影片有，但我沒有用)、波浪符選取器教學、RGB
      網頁色彩教學、relative 定位教學、absolute 定位教學
    </p>
  </div>
</div>

CSS 樣式

為了讓圖片與文字顯示正常，要給予盒模型。

body {
  box-sizing: border-box;
  font-family: "Noto Sans TC", sans-serif;
  background-color: #271919;
}

在 .wrap 加入 overflow:hidden; 會讓父層自動抓到所有子層的高度，是一個偷吃步的小技巧。

.wrap {
  width: 1200px;
  margin: 5% auto;
  overflow: hidden;
}

以下重點式記錄：

圖片排版處理

item 使用 float 會自動把右邊區塊的圖片變為橫向排列，並且斷行，但用 flex 就只能橫向排列，如果要達到該顯示，還會需要寫很多方法來達成，所以有時候 float 還是很好用的。

.item {
  float: left;
  img {
    width: 100%;
    vertical-align: middle;
  }
  &:first-child {
    width: 50%; //選到第一個 item
  }
  &:first-child ~ .item {
    width: 25%; //選到第二個以後的所有 item
  }
}

文字處理

為了讓文字可以在圖片初始化時不顯示，所以給予透明度為 0，當滑鼠移動到圖片上時則顯示。
設定文字在圖片的正中央，所以使用絕對定位，而相對定位在 item 上，並且使用 flex 的特性，主軸為直向，次軸為橫向，如此文字會垂直排列就會垂直置中對齊。

.text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #ffffff;
  background-color: rgba($color: #000000, $alpha: 0.6);
  display: flex;
  flex-direction: column; //主軸直向排列
  //垂直置中對齊
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.3s;
  &:hover {
    opacity: 1;
  }
}

CodePen https://codepen.io/hnzxewqw/full/MWKzYOa

提姆寫程式