给某个div设置遮罩层

2019-02-27  本文已影响0人  迪士尼在逃一刀

昨天遇到了要给一个背景图加一个透明度为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>

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

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

上一篇下一篇

猜你喜欢

热点阅读