BootStrap 实现导航栏nav透明，nav子元素文字不透明

时间：2023-02-19 22:37:19

在给nav 的属性赋值 opacity:0.0透明度时会导致nav内子元素会继承opacity属性。此时再对子元素赋值opacity:1.0 时会导致 子元素实际opacity值为0.0*1.0=0.0。

此情况可通过 一行代码完美解决：初始化nav时 加入 .navbar-transparent 例：

　　<nav class="navbar navbar-fixed-top navbar-transparent" role="navigation">

　　注：nav 内设置 navbar-transparent属性时不能包含 navbar-default 和 navbar-inverse 属性，会冲突！！！

BootStrap 实现导航栏nav透明，nav子元素文字不透明的更多相关文章

  1. &lbrack;置顶&rsqb;&NewLine; bootstrap自定义样式-bootstrap侧边导航栏的实现

    前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...

  2. bootstrap完整导航栏

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. Bootstrap，导航栏点击效果修复（补）

    前言: 昨天晚上休息,忘记发博客了.对于学习这件是,还是需要坚持的.想想自建一个Jekyll博客模版还是很兴奋的,话不多说,看正文吧! 关于开发:  先看个Demo吧,点这里.你会发现,点击是没有效果 ...

  4. 自定义iOS7导航栏背景&comma;标题和返回按钮文字颜色

    在iOS7下,默认导航栏背景,颜色是这样的,接下来我们就进行自定义,如果你仅仅是更改一下背景和颜色,代码会很简单,不需要很复杂的自定义View来替代leftBarItem 更改导航栏的背景和文字Col ...

  5. 【转】自定义iOS7导航栏背景&comma;标题和返回按钮文字颜色 -- 不错不错！！

    原文网址:http://blog.csdn.net/mad1989/article/details/41516743 在iOS7下,默认导航栏背景,颜色是这样的,接下来我们就进行自定义,如果你仅仅是更 ...

  6. 【转】 自定义iOS7导航栏背景&comma;标题和返回按钮文字颜色

    原文:http://blog.csdn.net/mad1989/article/details/41516743 UIBarButtonItem,navigationItem,backBarButto ...

  7. iOS导航栏背景&comma;标题和返回按钮文字颜色

    在iOS7下,默认导航栏背景,颜色是这样的,接下来我们就进行自定义,如果你仅仅是更改一下背景和颜色,代码会很简单,不需要很复杂的自定义View来替代leftBarItem 更改导航栏的背景和文字Col ...

  8. 父容器利用opacity设置透明后，子元素跟着变透明的解决方案

    背景半透明,子元素不透明的效果经常需要用到.通常对父容器使用opacity属性时,子元素也跟着变透明,所以不妨设置父容器的 background-color:rgba(r,g,b,x); 其中x取值从 ...

  9. 使用RGBa和Filter实现不影响子元素的CSS透明背景

    点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所 ...

随机推荐

  1. iOS XMPP 通信协议实现 图形化直观感受

    第一次随笔,实在不知写点什么有用的东西,那就分享一下本人最近的研究所得吧! 是关于iOS-XMPP-通信协议的实现,具体代码比较复杂,三言两句也实在难表达清楚,网上已有很多关于iOS XMPP协议的讲 ...

  2. &lbrack;&period;NET&rsqb; SQL数据分页查询

    [.NET] SQL数据分页查询 程序下载 范例下载:点此下载 原始码下载:点此下载 NuGet封装:点此下载 数据查询 开发系统时,使用C#执行SQL查询指令,就可以从SQL数据库里查询所需数据. ...

  3. C&num;基础之lock

    1.lock的本质 实现线程同步的第一种方式是我们经常使用的lock关键字,它将包围的语句块标记为临界区,这样一次只有一个线程进入临界区并执行代码.下面第一段的几行代码是关于lock关键字的使用方式, ...

  4. &lpar;转&rpar;WebApi自动生成在线文档WebApiTestClient

    原文链接:http://www.cnblogs.com/landeanfen/p/5210356.html 前言:这两天在整WebApi的服务,由于调用方是Android客户端,Android开发人员 ...

  5. SublimeText3 初探&lpar;工欲善其事&comma;必先利其器&rpar;

    告别2015,迎来了2016.祝看到这篇博客的兄弟们都猴年发财,人生走上另一个高度. 新年新气象,猴年我会常常来更新自己的博客,希望能接触到更多的园友. sublime text3 和atom 各有各 ...

  6. 安装tcpreplay时报错：configure&colon; error&colon; libdnet not found

    安装tcpreplay时报错configure: error: libdnet not found 解决方法: 下载包libdnet-1.8.tar.gz并安装,依次执行: ./configure m ...

  7. &sol;etc&sol;fstab一些信息

    [root@shine shine]# vim /etc/fstab ## /etc/fstab# Created by anaconda on Thu May 9 13:29:35 2013## A ...

  8. HDU3726---Graph and Queries 离线处理&plus;Treap

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3726 题意:n个点m条边的一张无向图,每个点有一个权值, 有3中操作. D X 删除第X条边 Q X ...

  9. vue组件初学--弹射小球

    1. 定义每个弹射的小球组件( ocicle ) 2. 组件message自定义属性存放小球初始信息(可修改) { top: "0px", //小球距离上方坐标 left: &qu ...

  10. 【NOIP2016提高组】 Day1 T3 换教室

    题目链接:https://www.luogu.org/problemnew/show/P1850 此题正解为dp. 我们先用floyd处理出任意两个教室之间的距离,用dis[i][j]表示. 用f[i ...

相关文章