如何让button按钮变成透明

html-css013

如何让button按钮变成透明,第1张

1、打开vscode，创建一个html5规范的测试页面H5Button.html。如果没有vscode，使用文本文件也是一样的效果，

2、在测试页面中添加一个按钮，注意，h5页面的按钮是button标签，不再是input标签了，

3、在浏览器中运行测试页面，可以看到默认按钮的样子，这样的按钮样式，通常来说是不被接受的，因为太过于普通，

4、在测试页面中，添加style代码块，在这里对所有button进行样式修改。因为，此处仅仅只做演示，所以，直接对按钮进行了样式修改，如果只需要对部分按钮进行样式修改，就可以使用类或者id选择器，

5、在浏览器中，再次运行测试页面，可以看到按钮变大了，其余并没有太大的区别，

6、这个时候，继续在测试页面中，对按钮的样式进行修改，添加按钮文字的颜色、按钮背景色、按钮边框大小和颜色，

7、在浏览器中运行，可以看到按钮看起来就变成透明的了，与之前默认样式的按钮完全不一样了。

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中除了设置display:none，还要设置opacity:0

也就是说，一开始就要把透明度设为完全透明，否则的话，当鼠标第一次放上去，show()运行后按钮就立刻出来了！