我想问下css怎么让导航条变透明呢?能给个代码范例吗
CSS设置透明度主要用到了opacity属性。下面简单给你一个范例代码。
HTML部分代码
<div id="butouming">这是不透明</div> <div id="touming">这是透明</div>
CSS部分代码
#butouming{ width:500px; height:40px; margin:0px auto; background:#0099FF; text-align:center; line-height:30px;} #touming{ width:500px; height:40px; margin:0px auto; background:#0099FF; opacity: 0.5; margin-top:20px; text-align:center;line-height:30px;}
最终效果图片
青岛星网提醒:opacity实现背景透明,文字也变透明了就。
实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法
css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8
css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)
IE专属滤镜 filter:Alpha(opacity=x),x 的取值从 0 到 100,如filter:Alpha(opacity=80)
css3的rgba兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持
CSS 透明全兼容的解决方案
设置透明背景,文字不透明,可采用的属性有rgba和IE的专属滤镜filter:Alpha,其兼容性如下图所示:
青岛星网觉得:IE6、7可以彻底抛弃了,现在使用的已经非常少了,可以忽略不计了。