### 填加遮罩层知识点详解
#### 一、遮罩层概念
遮罩层是一种常见的网页设计技术，主要用于创建一个半透明的覆盖层，通常用于遮挡页面的其他部分，使用户聚焦于特定区域或者实现某种视觉效果。遮罩层在网页设计中的应用非常广泛，比如模态窗口（Modal）、弹出框等场景中都能见到它的身影。
#### 二、创建遮罩层的方法
根据给定的代码片段，我们可以总结出一种基于纯 JavaScript 和 CSS 的方法来创建遮罩层。
##### 1. 获取目标元素
```javascript
var oDiv = document.getElementById('Printpictures');
varele = oDiv;
```
这里首先通过 `getElementById` 方法获取了 ID 为 `Printpictures` 的 DOM 元素，并将其赋值给变量 `oDiv` 和 `ele`。`oDiv` 变量是为了方便理解，实际操作中只用到 `ele`。
##### 2. 设置遮罩层的不透明度
```javascript
var opacity = opacity || 0.2; // 默认为 0.2
```
这里设置了遮罩层的默认不透明度为 0.2。如果外部传入了 `opacity` 参数，则使用该参数的值；如果没有传入，则使用默认值 0.2。不透明度范围一般在 0~1 之间，0 表示完全透明，1 表示完全不透明。
##### 3. 获取目标元素的位置和样式
```javascript
var rect = ele.getBoundingClientRect();
var style = getComputedStyle(ele, null);
```
- `getBoundingClientRect()` 方法返回元素的大小及其相对于视口的位置。
- `getComputedStyle()` 方法用于获取计算后的样式属性，可以得到元素当前实际的 CSS 值。
##### 4. 创建遮罩层
```javascript
var oMask = document.createElement('div');
```
通过 `document.createElement` 方法创建一个新的 `<div>` 元素作为遮罩层。
##### 5. 设置遮罩层样式
```javascript
oMask.style.position = 'absolute';
oMask.style.width = "100%";
oMask.style.height = "calc(100% - 1rem)"; // 宽高
oMask.style.zIndex = 11;
oMask.style.opacity = "" + opacity;
oMask.style.backgroundColor = '#000';
```
- **position**: 设置遮罩层的位置属性为 `absolute`，使其脱离文档流，可以根据父元素定位。
- **width/height**: 设置遮罩层的宽度为 100%，高度为 100% 减去 1rem，以适应不同的屏幕尺寸。
- **zIndex**: 设置遮罩层的层级为 11，确保它显示在其他元素之上。
- **opacity**: 设置遮罩层的不透明度，这里使用了前面设置的 `opacity` 变量。
- **backgroundColor**: 设置遮罩层的背景颜色为黑色。
##### 6. 添加遮罩层到页面
```javascript
ele.parentNode.appendChild(oMask);
```
将创建好的遮罩层添加到目标元素的父元素中，这样遮罩层就会显示在目标元素之上。
#### 三、扩展知识点
- **CSS 属性**：除了上述代码中使用的 CSS 属性外，还可以通过其他 CSS 属性进一步定制遮罩层的样式，例如 `border-radius` 用于设置圆角、`box-shadow` 用于设置阴影效果等。
- **JavaScript 动画**：利用 JavaScript 可以实现遮罩层的渐显渐隐效果，增强用户体验。
- **响应式设计**：为了确保遮罩层在不同设备上都能正常显示，还需要考虑响应式设计，可以通过媒体查询或百分比单位等方法实现。
- **兼容性问题**：在不同浏览器中，某些 CSS 属性的表现可能会有所不同，因此需要关注浏览器兼容性问题，确保遮罩层在各种环境下都能正确显示。
以上就是关于“填加遮罩层”的详细介绍，希望能够帮助大家更好地理解和掌握遮罩层的实现方法。
