给某个div设置遮罩层

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

一开始我是这样写的

<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style media="screen">
    .container{
      width:512px;
      height:384px;
      background-image: url('./bg.jpg');
      background-size:100%;
    }

   .mask{
      position:absolute;
      width:512px;
      height:384px;
      background:#fff;
      opacity:0.5;
    }
    .mask p{
      font-size:60pt;
      color:#fff;
    }
  </style>
</head>

<body>
<div class="container">
  <div class="mask">
    <p>好可爱呀</p>
  </div>
</div>

</body>
</html>

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

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

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

<div class="container">
  <div class="mask"></div>
  <p>好可爱呀</p>
</div>

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

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

<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style media="screen">
    .container{
      width:512px;
      height:384px;
      background-image: url('./bg.jpg');
      background-size:100%;
    }

    .container p::before{
      content:"";
      position:absolute;
      width:512px;
      height:384px;
      background:#fff;
      opacity:0.5;
    }
    .container p{
      font-size:60pt;
      color:#fff;
    }
  </style>
</head>

<body>
<div class="container">
  <p>好可爱呀</p>
</div>

</body>
</html>

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

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

给某个div设置遮罩层

推荐阅读更多精彩内容