当前位置：首页 > ds >正文

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

ds 2025/8/20 3:51:03

主线回顾

第二章：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;
}

属性	用途
background-color	背景色
background-image	背景图
background-repeat	是否重复
background-position	定位
background-size	尺寸（cover / contain）

✨ 第二阶段：多重背景层

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

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

属性	说明
position	必须设置为 relative、absolute 或 fixed 才能启用 z-index
z-index	数字越大，越靠上

注意：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 元素。

🧪 魔法试炼任务

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

🧠 总结幻纹宝典

技法	精要
background	多背景图支持、渐变混合
clip-path	裁剪形状、增强组件表现力
mask-image	渐隐、图案遮罩
z-index	控制视觉叠层关系
box-shadow	虚实光影，增强立体感