文章/答案/技术大牛

发布

社区首页 >问答首页 >反应CSS背景不透明度

问反应CSS背景不透明度
EN

Stack Overflow用户

提问于 2022-11-07 15:08:18

回答 2查看 61关注 0票数 -1

我试图在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;
}

reactjs

background

opacity

css

回答 2

Stack Overflow用户

发布于 2022-11-08 15:11:25

不透明度是以十进制值表示的。即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;
}

另外，你的肚脐可能是你身体的一部分。因此，通过在身体中加入奇偶校验，你就改变了每个组件的不透明度。

票数 0

Stack Overflow用户

发布于 2022-11-08 17:25:14

这似乎不太可能，你想让整个身体稍微看清楚(这就是你的不透明度: 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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74348738

复制

相似问题

问反应CSS背景不透明度
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应CSS背景不透明度EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应CSS背景不透明度
EN