CSS实现导航栏半透明背景效果
生活随笔
收集整理的這篇文章主要介紹了
CSS实现导航栏半透明背景效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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>效果
?
總結
以上是生活随笔為你收集整理的CSS实现导航栏半透明背景效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（892）：bom概述
- 下一篇： 弹出窗口背景透明 css,CSS弹出背景