html – 在导航栏上设置css不透明度

概述我正在为我正在开发的游戏制作一个网站.我刚刚开始,我正在使用导航栏.我希望徽标文本是纯黑色,没有不透明度,但我希望背景块具有不透明度.也是最有效的方法.我是html和Css的初学者. 这是CSS .navbar{ font-family:'Roboto', arial; position: fixed; }.navbar #navbar-back{ ba 我正在为我正在开发的游戏制作一个网站.我刚刚开始,我正在使用导航栏.我希望徽标文本是纯黑色,没有不透明度,但我希望背景块具有不透明度.也是最有效的方法.我是HTML和CSS的初学者.

这是CSS

.navbar{     Font-family:'Roboto',arial;       position: fixed;    }.navbar #navbar-back{     background: white;     opacity: .7;     border-bottom:solID;     border-bottom-wIDth: 1px;     border-bottom-color:#A4A4A4;     wIDth: 100%;     height: 55px; }.navbar #navbar-logo{     Font-size: 35px;     Font-color: black;     opacity: 1; }

这是HTML

<div >    <div  ID="navbar-logo">        <p>Infinity</p>    </div>    <div  ID="navbar-back">    </div></div>

感谢您的时间！

解决方法 一种解决方案是使用background：rgba(255,255,0.7);并为#navbar-logo提供更高的z-index：

.navbar {  Font-family: 'Roboto',arial;  position: fixed;}.navbar #navbar-back {  background: rgba(255,0.7);  border-bottom: solID;  border-bottom-wIDth: 1px;  border-bottom-color: #A4A4A4;  wIDth: 100%;  height: 55px;}.navbar #navbar-logo {  Font-size: 35px;  color: black;  opacity: 1;  z-index: 2;}

<div >  <div  ID="navbar-logo">    <p>Infinity</p>  </div>  <div  ID="navbar-back"></div></div>

检查这里的区别：

.navbar {  Font-family: 'Roboto',0.7);  border-bottom: solID;  border-bottom-wIDth: 1px;  border-bottom-color: #A4A4A4;  wIDth: 100%;  height: 55px;}.navbar #navbar-logo {  Font-size: 35px;  color: black;  opacity: 1;  z-index: 2;}

<div >  <div  ID="navbar-logo">    <p>Infinity</p>  </div>  <div  ID="navbar-back"></div>  <div>    <p >test</p>  </div></div>

总结

以上是内存溢出为你收集整理的html – 在导航栏上设置css不透明度全部内容，希望文章能够帮你解决html – 在导航栏上设置css不透明度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。