224 lines
6.3 KiB
HTML
224 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Video Background with Transparent Text Mask</title>
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
font-family: Arial, sans-serif;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.container {
|
||
position: relative;
|
||
background-image: url('./background-test.jpg');
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-position: center;
|
||
background-size: cover;
|
||
}
|
||
|
||
.overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.overlay svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* SVG文字样式 */
|
||
.overlay text {
|
||
font-family: "华文行楷", sans-serif;
|
||
font-size: 15rem;
|
||
font-weight: bold;
|
||
/* font-style: italic; */
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
fill: black;
|
||
}
|
||
|
||
/* 遮罩背景样式 */
|
||
.overlay .mask-bg {
|
||
fill: white;
|
||
}
|
||
|
||
/* 遮罩层样式 */
|
||
.overlay .overlay-bg {
|
||
fill: rgba(0, 0, 0, 0.6);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<div class="overlay">
|
||
<svg>
|
||
<defs>
|
||
<mask id="textMask">
|
||
<rect class="mask-bg" width="100%" height="100%"/>
|
||
<text
|
||
x="50%"
|
||
y="50%"
|
||
text-anchor="middle"
|
||
dominant-baseline="middle"
|
||
>星撰玉衡</text>
|
||
</mask>
|
||
</defs>
|
||
<rect class="overlay-bg" width="100%" height="100%" mask="url(#textMask)"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script>
|
||
const a = `
|
||
让我详细解释一下SVG mask的工作原理：
|
||
|
||
1. **SVG Mask的基本原理**：
|
||
- SVG的mask（遮罩）是一个灰度蒙版
|
||
- 在mask中：
|
||
- 白色（1.0）表示完全显示
|
||
- 黑色（0.0）表示完全隐藏
|
||
- 灰色（0-1之间）表示部分显示
|
||
|
||
2. **当前代码的具体工作流程**：
|
||
```html
|
||
<mask id="textMask">
|
||
<!-- 白色背景，表示整个区域都会显示遮罩层 -->
|
||
<rect width="100%" height="100%" fill="white"/>
|
||
|
||
<!-- 黑色文字，表示文字区域会隐藏遮罩层 -->
|
||
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="black" font-size="15rem" font-weight="bold">HELLO</text>
|
||
</mask>
|
||
|
||
<!--应用遮罩的矩形 -->
|
||
<rect width="100%" height="100%" fill="rgba(0, 0, 0, 0.3)" mask="url(#textMask)" />
|
||
```
|
||
|
||
3. **渲染过程**：
|
||
- 首先，mask中的白色背景（`fill = "white"`）表示整个区域都会显示遮罩层
|
||
- 然后，mask中的黑色文字（`fill = "black"`）会"挖出"文字形状的区域，使这部分完全透明
|
||
- 最后，这个mask被应用到一个半透明黑色背景上（`fill = "rgba(0, 0, 0, 0.3)"`）
|
||
|
||
4. **最终效果**：
|
||
- 文字区域（mask中的黑色部分）：
|
||
- 遮罩层完全隐藏
|
||
- 直接显示背景图片
|
||
- 其他区域（mask中的白色部分）：
|
||
- 显示半透明黑色遮罩层
|
||
- 背景图片被遮罩层覆盖
|
||
|
||
5. **为什么这样设计**：
|
||
- 使用mask而不是直接设置透明度，可以更精确地控制显示区域
|
||
- 文字区域完全透明，保证了背景图片的清晰显示
|
||
- 周围区域保持半透明黑色，提供了良好的对比度
|
||
|
||
这种实现方式的优点是：
|
||
- 精确控制：可以精确控制哪些区域显示遮罩，哪些区域透明
|
||
- 性能好：不需要重复加载背景图片
|
||
- 灵活性：可以轻松调整遮罩的透明度
|
||
- 可维护性：SVG结构清晰，易于修改和维护
|
||
|
||
需要我解释得更详细或者有其他问题吗？
|
||
`
|
||
|
||
|
||
const b = `
|
||
好的，让我详细解释一下SVG中各个标签的含义：
|
||
|
||
1. **`<svg>` 标签**：
|
||
- SVG的根元素
|
||
- 定义了一个SVG文档片段
|
||
- 可以设置宽高、视口等属性
|
||
|
||
2. **`<defs>` 标签**：
|
||
- 用于定义可重用的SVG元素
|
||
- 这里用来定义mask，使其可以在其他地方引用
|
||
- 相当于一个"定义区域"，里面的元素不会直接显示
|
||
|
||
3. **`<mask>` 标签**：
|
||
- 定义一个遮罩效果
|
||
- `id="textMask"` 给遮罩一个唯一标识符，方便引用
|
||
- 遮罩中的元素决定了哪些区域显示/隐藏
|
||
|
||
4. **`<rect>` 标签**：
|
||
- 用于绘制矩形
|
||
- 属性说明：
|
||
- `width="100%"`：宽度占满容器
|
||
- `height="100%"`：高度占满容器
|
||
- `fill="white"`：填充颜色为白色
|
||
|
||
5. **`<text>` 标签**：
|
||
- 用于绘制文本
|
||
- 属性说明：
|
||
- `x="50%"`：文本水平居中
|
||
- `y="50%"`：文本垂直居中
|
||
- `text-anchor="middle"`：文本水平对齐方式为居中
|
||
- `dominant-baseline="middle"`：文本垂直对齐方式为居中
|
||
- `font-size="15rem"`：字体大小
|
||
- `font-weight="bold"`：字体粗细
|
||
- `fill="black"`：文本颜色
|
||
|
||
6. **应用遮罩的 `<rect>`**：
|
||
- 这是实际显示的矩形
|
||
- `fill="rgba(0, 0, 0, 0.3)"`：半透明黑色
|
||
- `mask="url(#textMask)"`：引用之前定义的遮罩
|
||
|
||
完整的SVG结构：
|
||
```html
|
||
<svg>
|
||
<!-- 定义区域 -->
|
||
<defs>
|
||
<!-- 定义遮罩 -->
|
||
<mask id="textMask">
|
||
<!-- 遮罩背景 -->
|
||
<rect width="100%" height="100%" fill="white"/>
|
||
<!-- 遮罩文字 -->
|
||
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="black" font-size="15rem" font-weight="bold">HELLO</text>
|
||
</mask>
|
||
</defs>
|
||
<!-- 实际显示的矩形（应用遮罩） -->
|
||
<rect width="100%" height="100%" fill="rgba(0, 0, 0, 0.3)" mask="url(#textMask)"/>
|
||
</svg>
|
||
```
|
||
|
||
SVG的一些重要特性：
|
||
1. **坐标系统**：
|
||
- 左上角为(0,0)点
|
||
- x轴向右增加
|
||
- y轴向下增加
|
||
|
||
2. **单位**：
|
||
- 可以使用像素(px)
|
||
- 可以使用百分比(%)
|
||
- 可以使用相对单位(rem, em)
|
||
|
||
3. **定位方式**：
|
||
- 可以使用绝对定位（具体数值）
|
||
- 可以使用相对定位（百分比）
|
||
- 可以使用居中定位（50% + text-anchor）
|
||
|
||
4. **颜色表示**：
|
||
- 可以使用颜色名称（如white, black）
|
||
- 可以使用RGB值（如rgb(255,255,255)）
|
||
- 可以使用RGBA值（如rgba(0,0,0,0.3)）
|
||
- 可以使用十六进制（如#FFFFFF）
|
||
|
||
需要我详细解释某个具体的标签或属性吗？
|
||
`
|
||
</script>
|
||
|
||
</html> |