Hola, tengo un video de fondo (El movimiento de la medusa), esta es una foto de un marco de este video. Necesito entender por qué escribir el texto "Medusa" tiene un color de fondo, tal vez el color sea el #222, pero no veo cómo. para deshabilitarlo en el código. ¡Necesito crear una barra de navegación pero el color de fondo se interpone en el camino! Necesito que la barra de navegación sea transparente como esta
ejemplo de barra de navegación de tesla
Ver Código
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; }esto debería solucionar su problema de que la barra de navegación no es translúcida
.navbar { background-color: rgb(0 ,0 , 0, 0.5); }usando el color rgb, puede tener un cuarto valor para la opacidad o simplemente puede usar el tipo de opacidad
.navbar { opacity: 50%; } * { 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 */ }background-color: none; no es un CSS válido, background-color solo tomará un valor de color. Puede usar transparente en su lugar, así que use background-color: transparent; en lugar de background-color: none; . Puede encontrar que esto no hace nada cuando lo agrega a su elemento <h1> y eso se debe a que el selector de consulta *{} css le da a absolutamente cada elemento ese estilo, esto hará que el div que contiene el texto tenga un color de fondo. Poner cosas como el color de fondo en un * selector de consulta es generalmente una mala práctica. Sin embargo, no sé cuáles son tus intenciones. Probablemente debería darle al elemento <body> el estilo de color de fondo para que no interfiera con otros elementos.