代码之家 › 专栏 › 技术社区 › Mateus Lima

我怎么修?我需要一个透明的导航栏

frontend reactjs javascript

Mateus Lima · 技术社区 · 2 年前

嗨,我有一个背景视频(水母的动作)这是一张这段视频的一帧照片我需要理解为什么写“美杜莎”文本有背景色,也许是#222,但我不知道如何在代码中禁用它。我需要创建一个导航栏,但是背景色会碍事! 我需要导航栏像这样透明

参见代码

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 回复 | 直到 2 年前

ismail bilal 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 */
}

gavin 2 年前

这将解决导航栏不半透明的问题

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

使用rgb颜色,你可以为不透明度设置第四个值,或者你可以简单地使用不透明度类型

.navbar {
   opacity: 50%;
}

Cryptizism 2 年前

background-color: none; 不是有效的CSS, background-color 只接受颜色值。你可以用透明的,所以用透明的 background-color: transparent; 而不是 背景色:无; .当你把它添加到你的 <h1> 元素,这是因为 *{} css查询选择器提供了样式化的每一个元素,这将使包含文本的div具有背景色。把背景色之类的东西放进 * 查询选择器通常是一种不好的做法。但我不知道你的意图是什么。你应该给我 <body> 元素背景色样式,使其不会干扰其他元素。