昨天遇到了要给一个背景图加一个透明度为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>
最后的效果跟之前是一样的~
感觉出现这个问题还是因为我对继承这部分还是不够了解，以后应该会写一个关于继承的总结吧。
不过明天开始我就要去学驾照了，希望能早点考过回来学习哈哈哈。
如果有什么问题欢迎批评指正~
网友评论