第二章支线六 ·CSS幻纹术：背景、遮罩与视觉层级

主线回顾

第二章：CSS秘典 · 色彩与布局的力量

其他支线

支线一：影之殿堂 · 阴影与过渡魔法
支线二：浮空之域：布局法则深研
支线三 ·CSS炼金术：动画与变换高级奥义
支线四 ·响应圣坛：媒体查询与移动适配
支线五 ·CSS炼金续章：变量与暗黑主题术

🎬 剧情设定：

林昊随着炼金之路深入，来到一座永不静止的城市幻境——织界之域。天空飘浮着成千上万层透明图层，层层叠影，虚实交错。

幻纹术师「索娜」现身，身披图层披风，手持图形权杖。她轻声说道：

“世界由一层层图案构成，掌握背景、遮罩与层级之术者，方能编织视觉幻境。”

🎨 第一阶段：背景魔纹基础

教学点：background 属性详解

.box {
  background-color: #f0f0f0;
  background-image: url('texture.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

合并写法：

.box {
  background: #f0f0f0 url('texture.jpg') no-repeat center/cover;
}

✨ 第二阶段：多重背景层

幻纹术师挥动图形权杖，让多个图层浮现于一张卡片上：

.card {
  background: 
    linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0)),
    url('image.jpg');
  background-size: cover;
}

多个背景图从上到下排列，用逗号分隔，前层可叠加半透明效果或渐变。

🕸 第三阶段：遮罩术（mask）与裁切术（clip-path）

教学点：clip-path（裁剪形状）

.hexagon {
  clip-path: polygon(
    25% 0%, 75% 0%, 100% 50%,
    75% 100%, 25% 100%, 0% 50%
  );
}

使用 clip-path 可以裁剪元素外观为任意形状（圆形、多边形、心形等）

教学点：mask-image（遮罩图）

.fancy {
  mask-image: url('mask.svg');
  mask-size: cover;
}

使用遮罩图可实现渐隐、图案透明等复杂视觉效果（仅现代浏览器支持）

🪞 第四阶段：z-index幻术 · 掌控视觉层级

幻纹术师将一组卡片悬浮排列，要求林昊用 z-index 正确控制显示顺序。

.card {
  position: absolute;
  z-index: 10;
}
.card.highlighted {
  z-index: 99;
}

注意：z-index 只在同一“堆叠上下文（stacking context）”中有效。

🌌 第五阶段：幻影卡片 · 组合实战

示例：创建具有渐变遮罩与分层的动态卡片

<div class="card fancy-card">
  <h2>幻影卡片</h2>
  <p>这是一个带遮罩的卡片组件</p>
</div>

.fancy-card {
  background: linear-gradient(120deg, #8e44ad, #3498db);
  color: white;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-size: 100% 100%;
  z-index: 5;
  position: relative;
}

可组合使用多重背景、遮罩和阴影创造极具层次感的 UI 元素。

🧪 魔法试炼任务

1. 使用多重背景创建一个带透明渐变遮罩的图片组件
2. 使用 clip-path 创建一个六边形用户头像容器
3. 构建一个含多卡片层级的组件区域，利用 z-index 控制其堆叠顺序

🧠 总结幻纹宝典

🎁 成就与奖励

幻纹术师赠予林昊魔具：图层镜界盘，可任意组合图形、遮罩与背景效果，为任何组件打造独特幻象。

林昊离开织界之域，眼中已经能看透每一层界面背后的构造秘密。

题外话

最近闲来无事，做了个小程序，欢迎大家动动小手点点看😁