我该如何解决？ 我需要一个透明的导航栏
[英]How i fix it? I need a transparent navigation bar
问题描述
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.
嗨，我有一个背景视频（水母移动）这是该视频的一帧照片我需要了解为什么写“美杜莎”文本有背景颜色，也许颜色是#222，但我不知道如何在代码中禁用它。 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我需要导航栏像这样透明
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; }
3 个解决方案
解决方案1
0 2022-05-08 03:28:37
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使用 rgb 着色，你可以有第四个不透明度值，或者你可以简单地使用不透明度类型
.navbar {
opacity: 50%;
}
解决方案2
0 已采纳 2022-05-08 03:37:33
* { 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 */ }
解决方案3
0 2022-05-08 03:40:42
background-color: none; is not valid CSS, background-color will only take a colour value.无效 CSS， background-color只会取一个颜色值。 You can use transparent instead so use background-color: transparent;您可以改用透明，因此请使用background-color: transparent; instead of background-color: none;而不是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.当您将它添加到您的<h1>元素时，您可能会发现它没有任何作用，这是因为*{} css 查询选择器绝对为每个元素提供样式，这将使包含文本的 div 具有背景颜色。 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.您可能应该为<body>元素提供背景颜色样式，这样它就不会干扰其他元素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.