个人中心
gpt4 book ai didi

html - 背景色白色变得透明，不透明度设置为 1

转载 作者：行者123 更新时间：2023-11-27 23:51:00 24 4
gpt4 key购买 nike

为什么设置为白色的导航栏文本看起来是透明的？发生的事情是它根据背景上的图像改变颜色。是什么原因造成的，我该如何解决？这就是问题所在，下面是代码。因为有句话说“一段代码抵得上一千字”，但堆栈溢出不理解这一点，因此我会在下面写更多的话所以网站允许我发布这个问题。

/*请勿阅读此内容是带有图像的 slider 上方的透明背景导航栏，文本看起来是白色的，但如果它具有一定程度的透明度，它也会采用图像的颜色。我正在尝试创建一个具有透明导航栏和全高 slider 的网站。 slider 是使用滑动器构建的，我没有使用 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>

最佳答案

不透明度是从父元素继承的(#navbar 有 opacity: .4)。子级不透明度是父级不透明度的倍数。

因此，内部 #navbar 元素具有 (opacity * .4)，最大 .4，不能多，只能少(例如 .9 * . 4 = .36)。

换句话说， child 的不透明度不能高于 parent 。完全相同(什么都不设置，或 opacity: 1)，或更低。

关于html - 背景色白色变得透明，不透明度设置为 1，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56532841/

24 4 0
文章推荐： html - 如何在文本框下方显示日期格式标签
文章推荐： c++ - 为什么有两个不同的输出？
文章推荐： html - <input> 和