How i fix it? I need a transparent navigation bar-CodePudding

background video image

Hi I have a background video (The jellyfish move) this is a photo of a frame of this video I need to understand why writing "Medusa" text has a background color, maybe the color is #222, but I don't see how to disable it in code. i need to create a navbar but the background color is getting in the way! I need the navigation bar to be transparent like this

tesla navbar example

See Code

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;
}

CodePudding user response：

* {
  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 */
}

CodePudding user response：

this should fix your problem of navbar not being translucent

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

using the rgb coloring it you can have a 4th value for opacity or you can simply use the opacity type

.navbar {
   opacity: 50%;
}

CodePudding user response：

background-color: none; is not valid CSS, background-color will only take a colour value. You can use transparent instead so use background-color: transparent; instead of background-color: none;. You may find this does nothing when you add it to your <h1> element and that is because the *{} css query selector is giving absolutely every single element that styling, this will make the div containing the text have a background colour. Putting stuff like background color in a * query selector is generally a bad practice. However I don't know what your intentions are. You should probably give the <body> element the background color styling so it doesn't interfere with other elements .