给某个div设置遮罩层

昨天遇到了要给一个背景图加一个透明度为10%的遮罩层的情况，其实比较简单，但是由于我知识比较匮乏，硬是折腾了半个多小时，好气，所以总结一下。

一开始我是这样写的

  
  
  




  

    
好可爱呀
  

那一行字没有显示出来，我当时觉得简直匪夷所思，怎么会这样。
当时的效果是这样的

没有字，然后我把字的颜色改成了黑色，效果是这样的：

是不是看起来怪怪的，感觉不是那么黑而且透过字还能隐隐看到背景。
当时我不知道咋想的，一直觉得是字被遮罩层盖住了，所以颜色不是那么黑。所以改了半天z-index的属性，但是还是没有用。
改了大概有半个多小时，终于突然 想起来，继承！！
那个p标签是.mask的子元素，那他就会继承.mask的透明属性啊，所以即使我没有加opacity:0.5;，他也自动有0.5的透明度！
然后我把p拿出来，当做.mask的兄弟元素

  

  
好可爱呀

改成这样，然后效果一下就出来了

但是仔细看一下代码，那个class为mask的div真的有必要吗？他甚至没有内容，只是一个遮罩层，所以我们用::before代替就好了
所以代码改成

  
  
  




  
好可爱呀

最后的效果跟之前是一样的~
感觉出现这个问题还是因为我对继承这部分还是不够了解，以后应该会写一个关于继承的总结吧。

不过明天开始我就要去学驾照了，希望能早点考过回来学习哈哈哈。
如果有什么问题欢迎批评指正~