透明工具栏上的透明文本
[英]Transparent text on transparent toolbar
问题描述
我有一个部分透明的导航栏，我希望上面的文字完全透明。 我在此处使用的css使工具栏上的文本完全透明，但是它下方显示了稍微透明的工具栏。 我希望正文显示正文。
感谢任何帮助，谢谢！
body { background: #db8669; } .header { z-index: 99; position: fixed; width: 100%; height: 3rem; background-color: #00000077; color: #ffffff00; font-family: 'Encode Sans Expanded', sans-serif; text-align: center; } .header:hover { color: #ffffffdd; } .header li { display: inline; list-style-type: none; font-size: .75rem; } .header li:last-child { margin-right: 0; } .header li:hover { color: #ddffee; cursor: pointer; } .header ul { height: 3rem; float: right; display: inline-block; } .header p { font-family: 'Pacifico', cursive; font-size: 1rem; display: inline-block; float: left; margin-top: .3rem; margin-left: .3rem; height: 3rem; } .header .toolbar { width: 100%; display: inline-block; } .header nav { margin-right: 1rem; }
<body> <div class="header"> <div class="toolbar"> <div id="logo"><p>Joe Schmoe</p></div> <nav> <ul> <li id=florallink>Florals</li> <li id=landscapelink>Landscapes</li> <li id=portraitlink>Portraits</li> <li id=stilllink>Still Life</li> <li id=mystorylink>My Story</li> <li id=eventslink>Events</li> <li id=contactlink>Contact Me</li> </ul> </nav> </div> </div> </body>
1 个解决方案
解决方案1
0 已采纳 2018-01-04 09:15:00
您尝试的方式将行不通。 因为如果使文本透明，则文本将使用其父元素的颜色。 它不会直接符合header元素。 就像@dirk说的那样，在其中“打孔”
您可以将文本颜色设置为与正文背景颜色相同的颜色 。 这将使文本产生“在标题中打孔”的想法。
body { background: #db8669; } .header { z-index: 99; position: fixed; width: 100%; height: 3rem; background-color: #000000aa; color: #ffffff00; font-family: 'Encode Sans Expanded', sans-serif; text-align: center; } .header:hover { color: #db8669; } .header li { display: inline; list-style-type: none; font-size: .75rem; } .header li:last-child { margin-right: 0; } .header li:hover { color: #dc8668; cursor: pointer; } .header ul { height: 3rem; float: right; display: inline-block; } .header p { font-family: 'Pacifico', cursive; font-size: 1rem; display: inline-block; float: left; margin-top: .3rem; margin-left: .3rem; height: 3rem; } .header .toolbar { width: 100%; display: inline-block; } .header nav { margin-right: 1rem; }
<body> <div class="header"> <div class="toolbar"> <div id="logo"><p>Joe Schmoe</p></div> <nav> <ul> <li id=florallink>Florals</li> <li id=landscapelink>Landscapes</li> <li id=portraitlink>Portraits</li> <li id=stilllink>Still Life</li> <li id=mystorylink>My Story</li> <li id=eventslink>Events</li> <li id=contactlink>Contact Me</li> </ul> </nav> </div> </div> </body>
角度材料透明工具栏
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.