如何用css代码让导航条透明化

html-css025

如何用css代码让导航条透明化,第1张

1.进入卖家中心-店铺装修-找到导航栏编辑按钮

2.然后打开编辑，看提示窗口找到(显示设置)点击后看到白框就是CSS自定义框。

3.将下面对应的透明代码复制进去，导航栏就会透明显示。如图：

A.简单的淘宝新旺铺自定义CSS导航透明背景代码：

.skin-box-bd{background:none}

.menu-list{background:none}.link{background:none}

.menu{background:none}

.all-cats{background:none}

.all-cats{display:none}

.menu-list.menu.title{color:#CF6AA6}

B.完全的淘宝新旺铺自定义CSS导航透明背景代码：

.skin-box-bd{background:noneborder:none}

.menu-list{background:none}

.link{background:noneborder:none}

.menu{background:none}

.all-cats{background:none}

.skin-box-bd.all-cats.link{border:none}

.skin-box-bd.menu-list.menu{border:none}

.menu-list.menu.title{color:#000000font-size:15pxfont-weight:bold}

.all-cats.link.title{color:#000000font-size:15pxfont-weight:bold}

.skin-box-bd.menu-list.menu-selected.link{background:none}

.skin-box-bd.menu-list.menu-selected.link.title{background:none}

怎样在CSS样式中设置背景的透明度,下面一个具体的实例。把类为box的层设为透明。

<div class="box"></div>

<style>

.box{width:300pxheight:200pxmargin:0 autoboxder:1px solid #cccbackground:#000filter:alpha(opacity:30)opacity:0.3 -moz-opacity:0.3-khtml-opacity: 0.3}

</style>

其中background:#000filter:alpha(opacity:30)opacity:0.3为关键代码，当opacity值为1时，表示完全不透明，为0时表示完全透明。

其关的属性介绍如下:

opacity: 0.3；这是“最重要的”，因为它是在CSS的现行标准。这将在Firefox，Safari和Opera的大多数版本的工作。这将是你所需要的一切如果所有的浏览器都支持目前的标准。当然是他们不会错。

filter:alpha(opacity=30)这一个是针对IE浏览器

-moz-opacity:0.3你需要这一个支持老版本的Mozilla浏览器如Netscape Navigator。

-khtml-opacity: 0.3这是旧版本的Safari（1.×）当渲染引擎是使用仍被称为kthml，而不是目前的WebKit。