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/n/284622.html