CSS 圖層：深入理解基礎知識

一、層疊順序

在 CSS 中，每個元素都有一個默認的層疊順序，當元素重疊在一起時，層疊順序便能夠控制其顯示的先後順序。

元素的層疊順序可以通過 z-index 屬性來設置，它定義了元素在成為堆疊上下文後的層級，具有較高 z-index 值的元素會被放在具有較低值的元素上方。

除了通過 z-index 來改變層疊順序，還可以通過偽元素 ::before 和 ::after 來添加內容，以及在使用 CSS 動畫時通過 transform 屬性和 perspective 值來定義元素的位置，也會影響其層疊順序。

以下是一個例子，展示了如何使用 z-index 屬性來改變元素層疊順序：

  <div class="box blue">Blue Box</div>
  <div class="box red">Red Box</div>
  <div class="box yellow">Yellow Box</div>

  .box {
    position: absolute;
    width: 100px;
    height: 100px;
    text-align: center;
  }

  .blue {
    background-color: blue;
    left: 0;
  }

  .red {
    background-color: red;
    left: 50px;
    top: 50px;
    z-index: 5;
  }

  .yellow {
    background-color: yellow;
    left: 100px;
  }

二、堆疊上下文

在 CSS 中，當元素被堆疊起來時，會形成一個堆疊上下文（stacking context），堆疊上下文可以理解為一種基於元素層疊順序產生的 3D 立體效果，並且堆疊上下文之間是相互獨立的，所以它們互不影響。

以下情況會創建新的堆疊上下文：

根元素（HTML）
設置 position 屬性並且值不是 static 的元素
擁有 transform、perspective 或 filter 屬性的元素
元素擁有一個表示元素或其子元素應該採用混合模式的 isolation 屬性
設置 opacity 屬性值小於 1 的元素
設置 z-index 值不是 auto 的元素

一個元素所包含的所有子元素都在父元素的堆疊上下文中，如果一個堆疊上下文中的元素嵌套在另一個堆疊上下文中，那麼它們具有層疊上下文的嵌套關係。在這種情況下，父級的堆疊上下文永遠位於子級的堆疊上下文之上。

以下是一個例子，展示了如何使用 z-index 和 position 屬性來創建堆疊上下文：

  <div class="outer">
    <div class="inner">Inner Content</div>
  </div>

  .outer {
    background-color: gray;
    width: 200px;
    height: 200px;
    position: relative;
    z-index: 1;
  }

  .inner {
    background-color: blue;
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    z-index: 2;
  }

三、混合模式

混合模式（blend mode）是指在元素之間進行顏色混合的過程，它可以在兩個元素之間創建出非常美妙的視覺效果。

在 CSS 中，混合模式可以通過 mix-blend-mode 屬性來實現，這個屬性定義了元素的背景應該如何與其其設置的下方的元素顏色混合。值的範圍從 normal 到 difference。

以下是一個例子，展示了如何使用 mix-blend-mode 屬性來實現混合模式：

  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>

  .container {
    position: relative;
    width: 300px;
    margin: 0 auto;
  }

  .box1 {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    mix-blend-mode: multiply;
  }

  .box2 {
    width: 200px;
    height: 200px;
    background-color: #e67e22;
    mix-blend-mode: screen;
    position: absolute;
    top: 50px;
    left: 50px;
  }

四、透明度

透明度（opacity）是指元素的不透明度，這意味著它能夠展示被它下方的元素。

在 CSS 中，可以通過 opacity 屬性來給元素設置不透明度的值，值得範圍從 0.0 到 1.0。另外，通過設置 rgba() 來改變顏色透明度也是一種常見的操作。

以下是一個例子，展示了如何使用 opacity 屬性來設置元素透明度：

  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
  </div>

  .container {
    position: relative;
    width: 300px;
    margin: 0 auto;
  }

  .box1 {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    opacity: 0.5;
  }

  .box2 {
    width: 200px;
    height: 200px;
    background-color: #e67e22;
    position: absolute;
    top: 50px;
    left: 50px;
  }

五、漸變

漸變（gradient）是基於元素區域的填充效果，漸變效果可以通過使用 linear-gradient() 或 radial-gradient() 函數來實現。

通過 linear-gradient() 可以實現以水平或垂直方向為基礎的線性漸變，其語法為： linear-gradient(direction, color-stop1, color-stop2, ..., color-stopN)。值得注意的是，每個顏色點的值也可以添加一個可選的方向值，用於控制顏色指向。

同樣地，通過使用 radial-gradient()，可以創建以圓形、橢圓形或圓錐形為基礎的輻射性漸變。

以下是一個例子，展示了如何使用 linear-gradient() 來創建漸變效果：

  <div class="container">
    <div class="box"></div>
  </div>

  .container {
    position: relative;
    width: 300px;
    margin: 0 auto;
  }

  .box {
    width: 200px;
    height: 200px;
    background: linear-gradient(to right, #3498db, #e67e22);
    position: absolute;
    top: 50px;
    left: 50px;
  }

六、盒陰影

盒陰影（box-shadow）是一種在元素周圍創建陰影效果的技術，可以用來創建 3D 效果，以及幫助提升頁面設計的可讀性和可接受性。

盒陰影可以實現不同的效果，如展平效果、立體效果和浮雕效果等。

以下是一個例子，展示了如何使用 box-shadow 屬性來創建陰影效果：

  <div class="container">
    <div class="box"></div>
  </div>

  .container {
    position: relative;
    width: 300px;
    margin: 0 auto;
  }

  .box {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 50px;
    left: 50px;
  }

七、總結

CSS 圖層是前端開發中非常重要的概念，在網頁設計和頁面布局中能夠大大地提高效率和創造性。本文從層疊順序、堆疊上下文、混合模式、透明度、漸變和盒陰影等多個方面，對 CSS 圖層的基礎知識進行了講解和演示。在實際開發中，通過合理使用這些技術，可以為 Web 設計帶來更多更好的圖層效果。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/284622.html