给某个div设置遮罩层

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

一开始我是这样写的



  
  
  



好可爱呀

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


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

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

好可爱呀

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


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



  
  
  



好可爱呀

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

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

你可能感兴趣的:(给某个div设置遮罩层)