我该如何解决？我需要一个透明的导航栏

Question

background video image

嗨，我有一个背景视频（水母移动）这是这个视频的一帧照片我需要理解为什么写“Medusa”文本有背景颜色，也许颜色是#222，但我看不到如何在代码中禁用它。我需要创建一个导航栏，但背景颜色妨碍了我！我需要导航栏像这样透明

tesla navbar example

查看代码

import logo from './logo.svg';
import './App.css';
import bgvideo from './components/bgvideo.mp4';
function App() {
  return (
    <div className="App">
       <div className='navbar'>
            <h1>Medusa</h1>
          
      </div>
        <div className='bg'>
           <video autoPlay muted loop>
              <source  src= {bgvideo} type ="video/mp4" />
           </video>
        </div>
    </div>
  );
}

export default App;

* {
  margin: 0;
  padding: 0;
  background-color: #222;
}


video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

h1 {
  color: white;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  font-size: 6rem;
  margin-top: 30vh;
  background-image: none;
  background-color: none;
}

Answer 1

这应该可以解决您的导航栏不是半透明的问题

.navbar {
    background-color: rgb(0 ,0 , 0, 0.5);
}

使用 rgb 着色你可以有第四个不透明度值或者你可以简单地使用不透明度类型

.navbar {
   opacity: 50%;
}

Answer 2

* {
  margin: 0;
  padding: 0;
  /* background-color: #222; remove this line */
}


video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

h1 {
  color: white;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  font-size: 6rem;
  margin-top: 30vh;
  /* background-image: none; and no need for this */
  /* background-color: none; and this */
}

Answer 3

background-color: none;无效CSS，background-color只会取一个颜色值。您可以使用透明代替，因此请使用 background-color: transparent; 而不是 background-color: none;。当您将它添加到 <h1> 元素时，您可能会发现它没有任何作用，这是因为 *{} css 查询选择器绝对为每个元素提供了样式，这将使 div 包含的文本有背景色。将背景颜色之类的东西放在 * 查询选择器中通常是一种不好的做法。但是我不知道你的意图是什么。您可能应该为 <body> 元素提供背景颜色样式，这样它就不会干扰其他元素。

我该如何解决？我需要一个透明的导航栏

How i fix it? I need a transparent navigation bar

javascript

frontend

reactjs