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

html-css09

如何用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。

透明色:transparent

背景色设为透明,代码如下:background-color:transparent

字体颜色设为透明,代码如下:color:transparent

扩展资料:

常用颜色代码分4种,分别如下:

1、常用颜色单词,比如green(绿色),yellow(黄色),red(红色),transparent(透明色)等;

2、以#号开头的六个字符组成的颜色代码,比如:#FF0000(红色),#000000(黑色),#F9F900(黄色)等;

3、颜色rgb值,表达方式:rgb(参数1,参数2,参数3),三个参数分别表示r,g,b

1)R:红色值。正整数|百分数

2)G:绿色值。正整数|百分数

3)B:蓝色值。正整数|百分数

4、rgba(参数1,参数2,参数3,参数4),这种方式前三个参数与上面第3点种相同,第四个参数表示透明度,数值在0-1之间。0表示透明度为0(即透明色),1表示透明度为1(百分百)。