Question

我有一个部分透明的导航栏，我想让它上面的文字完全透明。我在这里的CSS使条形图上的文字完全透明，但它下面显示了略微透明的工具栏。我希望身体背景通过文字显示。

感谢任何帮助，谢谢！

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

你尝试的方式不起作用。因为如果使文本透明，文本将采用其父元素的颜色。它不会直接成为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>

透明工具栏上的透明文本

1 个答案: