CSS实现导航栏半透明背景效果

最新推荐文章于 2024-10-13 17:09:25 发布

smx6666668

最新推荐文章于 2024-10-13 17:09:25 发布

阅读量3.4k

点赞数 2

分类专栏：前端HTML 文章标签： css html5

本文链接：https://blog.csdn.net/smx6666668/article/details/123742108

版权

前端HTML 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用CSS的rgba属性来实现背景的半透明效果，并提供了具体的代码示例，包括一个简单的半透明div块和一个带有半透明背景的导航栏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

效果