<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景半透明例子</title><style>body {background-color: deeppink;}div {width: 200px;height: 200px;background: rgba(0,0,0,0.3);/* r:red g:green b:blue a:alpha(半透明):0-1,1是不透明，0是全透明 */color: white;}</style></head><body><div>半透明效果</div></body></html>
应用到导航栏
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景半透明例子</title><style>.navbackground{/*半透明背景栏*/width: 1300px;height: 35px;background: rgba(0,0,0,0.3);/* r:red g:green b:blue a:alpha(半透明):0-1,1是不透明，0是全透明 */color: white;}</style></head><body><div class="navbackground"> <ul ><li>资料设置</li><li >账户信息</li><li >信息</li> </ul></div></body></html>
效果
