当青训营遇上码上掘金，实现简单个人名片用于展现我的兴趣爱好等等~
这是我参与「 第五届青训营 」伴学笔记创作活动的第 17 天

实现思路

🎈 目前仅是半成品，后续有时间会继续完善并优化的

• 设计创作布局以及主题
• • 成果展示
• 开始“码上掘金”
• 一些疑惑以及解决办法
• 创造特点（特点就是没有特点）

成果展示

名片效果如下👇：

遮罩展开后效果如下（半成品）👇：

详细介绍

一 设计创作布局以及主题

开始创造bug之前，考虑到我一个爱好画画的程序媛的倔强，决定为接下来的粪山做一些前期准备，比如简单设计一下它的大致布局（这里手头花了些布局框框就不做展示了），并基本确定了主题颜色。

因为时间有限（拖延症患者的磕头Pengpengpeng），所以就不对色彩主题要求太高，以蓝色为基调：

二 开始“码上掘金”

实话说毕竟追求速度，本粪山现在还只是个坑状🕳，有点不好介绍了嘿嘿
这里就仅作部分展示避免文章内容显得太少（泪目）👇

<template>
  <div class="container">
    <!-- 底层 -->
    <div class="card"> 

      <div class="aboveContent">
        <!-- 头像 -->
        <div class="img">
          <img src=" " />
        </div>
        <!-- 名字性别 -->
        <div class="infor">
          <p id="name"></p>
          <p id="others"></p>
        </div>
      </div>
      <div class="bottomContent">
        <div id="line"></div>
        <div id="introduce">
          <p id="introP">
            
          </p>
        </div>
      </div>
    </div>


    <!-- 遮罩 - 未完成，后续补充 -->
    <div class="maskContainer">
        <!-- 遮罩层展示 -->
        <div class="maskLayer" ref="mask">
          <div class="maskBox"></div>
          <div class="myMask">
            <div class="maskContent">

            </div> 
            <div class="hideMask" @click="hideMask">
              🙅‍♀️
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

三 一些疑惑以及解决方案

其实现在就遇到了一个疑惑，这里为大家简单说明一下。
在样式的书写中，我遇到了这样一个问题：原先我设想，.maskLayer这个盒子作为展开遮罩的底层（灰色那一层），为了避免全灰或全黑带来的奇妙效果（起码并不普遍也不美观），需要给这个盒子设置透明纸，但很轻易的发现，父元素的opacity属性是会被子元素继承的，即使给子元素设置为opacity: 1;也无法解决问题。因为子元素是在基于继承父元素后的透明度再对opacity进行设置，通俗来讲就是，当父元素背景颜色设置透明度opacity: 0.5;时，子元素会继承，即使给子元素设置opacity: 1;，子元素的透明度也是在父元素0.5的基础上设置的。
所以.myMask盒子就会因此也透明起来，效果显然很糟糕。那么该如何解决呢？

1 opacity - 子元素继承父元素透明度如何解决

我尝试的第一个方法：
父元素背景颜色设置透明度时，避免使用

background: rgb(86, 86, 86);
opacity: 0.5;

而是将其更换成：

background: rgb(86, 86, 86, 0.5);

但是！很奇怪，本地试验无误的操作，在码上掘金上失效了，不清楚是我的原因还是，蹲个大佬给我解惑蟹蟹。于是我尝试了另一个方法：

因为是子元素才会继承父元素的opacity属性，那么让它不成为子元素就是一个不错的解决思路。我们可以新增一个子元素，将它绝对定位到父元素位置，然后在这个元素上设置背景色与透明度。

然后按照上述方法对它的背景色以及透明度进行设置，现在变成了这样：

// 遮罩层 - 父元素
.maskLayer {
    // 篇幅有限，此处对非透明度和背景色的内容略写
    // background: rgb(86, 86, 86, 0.5);
    
    // 新拉来的养兄弟盒子
    .maskBox{
        background: rgb(86, 86, 86);
        opacity: 0.5;
    }
    // 遮罩层上展示的框框以及内容（并不想继承透明度的子元素）
    .myMask {
    }
} 

由此，我们就顺利解决了子元素继承父元素透明度的问题。

四 创造特点

特点就是没有特点，下一个。

✌

个人总结

“快乐”的亡羊补牢日子，拖延症再也不敢了。（下次还敢）

很遗憾遮罩还没有完全实现，js完全还没开始😥，临近返校都在各种忙活，如果有时间的话一定争取将内容完善并优化，感谢大家的观看，栓Q~~~