简而言之就是，将导航的ul列表放在一个盒子里，然后导航栏置顶，设置透明度，设置z-index值

效果图如下：

页面代码：

body:

<!-- 系统导航部分 --><div class="daohang"><ul class="nav"><li><a target="_blank" href="https://www.baidu.com/">物联网设备管理系统</a></li><li><a target="_blank" href="https://www.baidu.com/">数据交换系统</a></li><li><a target="_blank" href="https://www.baidu.com/">数据质量校验系统</a></li><li><a target="_blank" href="https://www.baidu.com/">大数据挖掘与分析系统</a></li><li><a target="_blank" href="https://www.baidu.com/">大数据可视化管理系统</a></li></ul></div>

css:

/* 导航栏 */
* {/* 重置样式表*/margin: 0;padding: 0;
}
h1 {text-align: center;
}
.nav {width: 1248px;height: 48px;/* background-color: #e3e8e3; */margin: auto auto;}
.nav li {float: left;list-style-type: none;line-height: 50px;
}
.nav a {/* 把a改成块元素去除下划线*/display: block;text-decoration: none;font-size: 17px;/* 将文字在父元素中垂直居中*/padding: 0 20px;color: #0c0c0c;
}
.nav a:hover {background-color: burlywood;
}
.nav li:last-child a {padding: 0 41px 0 42px;
}
.daohang{position: fixed;height: 3rem;width: 100%;right: 0;top: 0;/* //一直将导航栏置于最顶层 */z-index: 999;/* //设置导航栏背景颜色 */ background-color: rgb(236, 241, 236,0.5); /* opacity: 0.4; */}

总结：简而言之就是，导航栏置顶，设置透明度，设置z-index值，其中透明度设置可以用rgb（X，X，X，x）表示，最后一项在0-1之间取值，数字越小越透明，也可以使用opacity属性表示，取值也是0-1。

css导航栏悬浮在轮播图上面，如何设置半透明悬浮效果相关推荐

【HTML+CSS+JS】模仿星巴克主页，练习CSS排版，JS实现轮播图以及悬停动画（公开完整源码）
目录:完整源码仅供学习一.效果演示二.完整源代码 2.1 HTML代码 2.2 JS代码 2.3 CSS代码 2.3.1 index.css 2.3.2 base.css 三.完整项目下载一.效 ...
html加css做成的简易木马轮播图
html加css做成的简易木马轮播图自己做着当练习的,还没有加js切页效果代码如下: <!DOCTYPE html> <html lang="en"> ...
html制作课程导航页面,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）...
学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分) 成品截图前期准备素材一.项目页面PSD源文件二.前期准备工作三.CSS属性书写顺序四.布局分析五.布局流程开始页面制作头部 ...
html+css+js实现的图片轮播图下方配文字可变图片可点击
js代码 <script>// 首先获取相关DOMvar box =document.getElementById('box');var img =document.getElementB ...
html css实现自动滑动的轮播图,CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）...
简单demo:使用HTML+CSS 实现轮播图(三张图为例,分别为:红.绿.蓝)的效果. 实现效果: 不能发视频,截图来代替吧示意图1.png 示意图2.png 示意图3.png 实现思路使用 d ...
css3旋转木马轮播图,超酷jQuery 3D旋转木马效果轮播图插件
jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得推荐. 由 ...
js轮播图(点击图片切换定时器效果)
轮播效果:点击上一页,下一页切换图片,设置定时器每过两秒进行自动切换不说别的直接上代码 <!DOCTYPE html> <html> <head><titl ...
如何实现移动端轮播图的左滑右滑效果
既然是滑动的话肯定是touch事件,需要获取触摸屏幕开始的X值,和结束的值,怎样才算结束的值?就是在屏幕中移动的值并将手抬起的X值,然后通过touchend介绍事件进行判断操作 //1.先获取手指在轮 ...
js原生 JavaScript轮播图【渐变淡入淡出】效果实现（附代码）
目录前言轮播图的组成以及实现思想左右按钮的隐藏与显示核心思想代码实现动态生成底部小圆圈核心思想代码实现右左按钮实现核心思想代码实现实现自动播放核心思想代码实现整体代码(复 ...

css导航栏悬浮在轮播图上面，如何设置半透明悬浮效果

简而言之就是，将导航的ul列表放在一个盒子里，然后导航栏置顶，设置透明度，设置z-index值

css导航栏悬浮在轮播图上面，如何设置半透明悬浮效果相关推荐

最新文章

热门文章