设置透明度的方法:
1、使用background-color:rgb(0,0,0,0.5),最后一项取值在0-1之间,数值越小越透明。
2、使用opacity属性,设置了background-color以后,直接设置opacity:0.5,取值在0-1之间,数值越小越透明。
但是值得注意的一点:直接使用opacity属性时,导航栏的文字也会相应的设置了透明度。为了解决这个问题,我们就要使用background-color:rgb(0,0,0,0.5)这种方法来设置透明度。
效果对比:
使用background-color设置透明度代码和效果:
.daohang{
position: fixed;
height: 3rem;
width: 100%;
right: 0;
top: 0;
/* //一直将导航栏置于最顶层 */
z-index: 999;
/* //设置导航栏背景颜色 */
background-color: rgb(236, 241, 236,0.5);
}
使用opacity设置透明度代码和效果:
.daohang{
position: fixed;
height: 3rem;
width: 100%;
right: 0;
top: 0;
/* //一直将导航栏置于最顶层 */
z-index: 999;
/* //设置导航栏背景颜色 */
opacity: 0.4;
background-color: aliceblue;
}