Question

我正在尝试学习反应。我想先制作一个半透明的引导导航栏并为其着色，但是由于设置主要背景颜色的方式，导航栏的某些部分具有与其余部分不同的颜色。我怎样才能解决这个问题？

应用程序：

function App() {
  return (

      <div> <Navbar/> </div>
  );
}
export default App;

App.css：

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: blue;
}

body{
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.4;
}

导航栏：

function Navbar() {
        return (

            <nav class="navbar navbar-expand-lg navbar-light">
            <a className="navbar-brand" href="/">Test</a>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span className="navbar-toggler-icon"></span>
            </button>

            <div className="collapse navbar-collapse" id="navbarSupportedContent">
              <ul className="navbar-nav mr-auto">
                <li className="nav-item active">
                  <a className="nav-link" href="/">About<span className="sr-only">(current)</span></a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="/">Link</a>
                </li>
                <li className="nav-item dropdown">
                  <a className="nav-link dropdown-toggle" href="/" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                  </a>
                  <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a className="dropdown-item" href="/">Action</a>
                    <a className="dropdown-item" href="/">Another action</a>
                    <div className="dropdown-divider"></div>
                    <a className="dropdown-item" href="/">Something else here</a>
                  </div>
                </li>
              </ul>
            </div>
            </nav>
        )
    }
    export default Navbar;

Navbar.css：

.navbar{
    all: unset;
    background-color: rgba(255, 0, 0, 0.5);
    color:  rgba(255, 255, 255, 0.5);
}
#navbarSupportedContent{
    all: unset;
    background-color: rgba(255, 0, 0, 0.005);
}

Answer 1

在CSS的这一部分中，您将为页面上的每个元素设置背景色。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: blue;
}

只需将此规则分别移至正文和导航栏：）

导航栏背景零件的颜色不同

1 个答案: