为什么我的导航栏文本设置为白色看起来是透明的？ 发生的是，它会根据背景图像更改颜色。是什么原因造成的，我该如何解决？ 这就是问题所在，下面是代码。因为有一句俗语“一段代码值得一千个单词”，但是堆栈溢出不理解这一点，因此我将在下面编写更多单词让我发布这个问题。
/ *请勿阅读此内容 是带有图像的滑块上方的透明背景导航栏，文本看起来是白色的，但是它也带有图像的颜色，就像它具有一定程度的透明度一样。 我正在尝试创建一个具有透明导航栏和全高滑块的网站。该滑块是使用swiper构建的，而不是使用bootstrap。
感谢您的帮助。* /
/* #region General */
/*Do not put height and width styles for the "html and body" elements
because it conflicts with boostrap. Rembember that bootstrap has
its own version of "Normalize.css"*/
*{
box-sizing: border-box;
}
html,body{
font-family:"Roboto", sans-serif;
color:#222222;
box-sizing: border-box;
margin:0;
padding:0;
}
html{
height:100vh;
/*Si pongo el estilo: "width:100vw;"
por algun motive crea una scroll bar*/
}
body{
height:100%;
}
.site-wrapper{
height: 100%;
padding: 0;
margin:0;
}
/* #endregion General */
/*#region Navbar*/
/* TODO: paste here navbar styles
from navbar.css */
#navbar{
background-color:transparent;
opacity:0.4;
border:none;
color:white;
position:fixed;
display:flex;
font-weight:500;
width:100%;
z-index:9;
}
#navbar header{
width:100%;
}
#navbar nav.visible{
display:flex;
width:100%;
}
#navbar nav>a{
text-decoration:none;
width:400px;
color:white;
}
#navbar nav.visible a .icon{
text-align:center;
display:flex;
justify-content:center;
font-weight:700;
}
#navbar ul{
display:flex;
justify-content:flex-end;
width:100%;
margin-right:6rem;
}
#navbar ul>li{
flex-basis:content;
flex-shrink:1;
list-style:none;
margin:0 2rem 0 2rem;
}
#navbar ul a{
text-decoration:none;
color:white;
}
/*Hidden navbar*/
#navbar nav.hidden{
display:none;
}
#navbar nav.show{
display:block;
}
#navbar nav.hidden ul{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
#navbar nav.hidden ul>li{
height:50px;
}
#menuButton{
display:none;
background:transparent;
border:none;
color:white;
fill:white;
height:100%;
width:30px;
margin:.5rem .5rem 0 auto;
padding:0;
}
/*Navbar background toggle*/
#navbar.bg{
background-color:yellow;
opacity:0.4;
}
/*#endregion Navbar*/
/*#region Slider*/
#slider .swiper-slide{
width:100%;
height:100vh;
background:url(https://www.fillmurray.com/460/300);
background-size:cover;
}
/*#endregion*/
/*#region Welcome*/
#welcome{
width:100%;
/*
background-color:rgba(0,0,0,0.2);
*/
margin:0;
padding:2rem;
text-align:center;
}
#welcome .welcome>*{
margin:0;
}
#welcome .welcome>h2{
padding:2rem;
}
#welcome .welcome>h5{
padding:2rem;
}
/*#endregion*/<!DOCTYPE html>
<html lang="en">
<!--#region Head-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Swiper -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
<!--Css-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--End Css-->
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
</head>
<!--#endregion -->
<body>
<div class="site-wrapper" id="site-wrapper">
<!--#region Navbar -->
<section id="navbar">
<header>
<nav class="visible">
<a id="logo" class="logo" href="#">
<div class="icon">
<p>da Vinci Engineering</p>
</div>
</a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
<button id="menuButton" class="menu">
<div class="icon">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
</svg>
</div>
</button>
</nav>
<nav id="navbarHidden" class="hidden">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
</ul>
</nav>
</header>
</section>
<!--#endregion -->
<!--#region Slider -->
<section id="slider">
<!-- Slider main container -->
<div class="swiper-container">
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
</div>
</section>
<!--#endregion -->
<!--#region Welcome -->
<section id="welcome" class="welcome">
<div class="welcome">
<h2>Welcome to da Vinci Engineering</h2>
<h5>We are a company compromised with desing.</h5>
<p>Ipsum at lorem esse delectus libero, sint. Pariatur cumque dolorum ab quia voluptates hic, magnam? Accusantium quia labore sunt at</p>
</div>
</section>
<!--#endregion Welcome -->
</div>
<!-- /#site-wrapper.site-wrapper -->
<!-- #region Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Swiper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<!-- Custom scripts -->
<!-- #region Swiper slider intialization -->
<script>
let swiper = new Swiper('.swiper-container',{
loop:true,
slidesPerView:1,
navigation:{
nextEl:'.swiper-button-next',
prevEl:'.swiper-button-prev',
},
pagination:{
el: '.swiper-pagination',
},
autoplay:{
delay:5000,
},
});
</script>
<!--
<script>
var mySwiper = new Swiper ('.swiper-container', {
loop:true,
slidesPerView:3,
spaceBetween:30,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay:{
delay:3000,
},
});
</script>
-->
<!--
<script>
var swiper = new Swiper({
el: '.swiper-container',
initialSlide: 2,
spaceBetween: 50,
slidesPerView: 2,
centeredSlides: true,
slideToClickedSlide: true,
grabCursor: true,
scrollbar: {
el: '.swiper-scrollbar',
},
mousewheel: {
enabled: true,
},
keyboard: {
enabled: true,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
-->
<!-- #endregion Swiper -->
<!-- #endregion -->
</body>
</html>
答案 0 :(得分：0)
不透明度是从父元素继承的（#navbar具有opacity: .4）。孩子的不透明度是父母的不透明度的倍数。
因此，内部#navbar元素的（opacity * .4）最大值为.4，不能更多，也更少（例如.9 * .4 = .36）。
换句话说，孩子的opacity不能比父母更高。相同（不设置任何值，或opacity: 1）或更低。