让容器半透明显示容器后的背景

前端小白记录学习和工作所遇到的问题

---

具体需求：

        一个页面中最外层有一个父盒子容器，在父容器内有一个nav导航标签。为父容器设置背景图，然后让nav导航栏处于半透明状态，并且可以通过nav导航栏看见父容器的背景图。

解题思路：

       设一个div父容器，为其设置background背景，

       在父容器内部定义一个nav标签，为其使用opacity设置透明度。

遇到问题：

1. 导航栏设置透明度方式？
   • opacity：透明度（0 - 1）—— 设定容器下所有元素，opacity具有继承效果，在容器中使用opacity属性的话，会导致其下的所有子容器都会有这个效果。
   • background：rgba（红色，蓝色，绿色，透明度）—— 该属性指挥作用域设定的当前元素的背景，不会有继承效果。
2. 设置透明度后nav导航只是颜色变透明还是看不见父容器的背景图？
   • 需要使用给遮罩层设定相对于父元素的绝对定位，即在本题使用子绝父相

最终解决：

div{
    background: url(icon-s.jpg);
    position:relative;
}
nav{
    position:absolute;
    top:0;
    left:0
}

---

        记录工作学习问题，如果有什么错误，望大佬们指点指点。