React CSS背景不透明度

我试图在CSS中为背景添加不透明度，但是导航栏不透明，而不是背景。

我不知道我做错了什么。

我试着改变CSS中的body标签，但是导航栏的不透明度变了，而不是背景。

body {
  background-image: url("images/fenerbahce.jpeg");
  background-size: cover;
  opacity: 50%
}
.navbar {
  padding: 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #939392;
  top: 0;
  background-color: #ccd0d0;
}

不透明度以十进制值给出。即50%用'0.5'表示

body {
  background-image: url("images/fenerbahce.jpeg");
  background-size: cover;
  opacity: 0.5
}
.navbar {
  padding: 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #939392;
  top: 0;
  background-color: #ccd0d0;
}

你的导航栏可能是你身体的一部分。因此，通过在正文中添加奇偶校验，您将改变每个组件的不透明度。

你似乎不太可能想要整个主体被稍微看穿(这是你的不透明度:50%)，你也不希望你的导航栏中的文字有点模糊。

我认为你正在寻找的是一种方法，使你的导航栏的背景稍微看透。因为它只是一种颜色，你可以通过在十六进制颜色的末尾添加几个字节来做到这一点。试着看看怎样才能达到你想要的透明度。

下面是一个简单的例子:

<style>
  * {
    margin: 0;
  }
  
  body {
    background-image: url("https://picsum.photos/id/1015/1024/768");
    background-size: cover;
  }
  
  .navbar {
    padding: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #939392;
    top: 0;
    background-color: #ccd0d066;
  }
</style>
<body>
  <div class="navbar">
    <ul>
      <li>link1</li>
    </ul>
</body>

相关内容

最新更新

热门标签：