如何在 React 中为导航栏提供透明背景？答案

【问题标题】：How to give navbar transparent background in React?如何在 React 中为导航栏提供透明背景？
【发布时间】：2021-09-23 18:19:38
【问题描述】：

我在网页上有一个图像背景，因此我希望导航是透明的，以便图像可见。我试过背景色：rgba(0,0,0,0.0);和背景颜色：透明； - 以前在一个简单的 html 网站中对我有用，但这里没有变化。是不是不能react or？

这里是导航栏 CSS sn-p：

.navbar {
height: 80px;
display: flex;
background-color: transparent; 
justify-content: center;
align-items: center;
position: sticky;
top: 0;
font-size: 1.3rem;
border-bottom: 1px solid white; }

这里是 Navbar.js 文件，可能会让事情更清楚：

const Navbar = () => {
return (
    <>
        <nav className="navbar">
            <div className="navbar-container">
                <Link to="/" className="navbar-logo">
                    ECO drvin
                </Link>
                <ul className="nav-menu">
                    <li className="nav-item">
                        <Link to="/" className="nav-links">
                            Home
                        </Link>
                    </li>
                    <li className="nav-item">
                        <Link to="/" className="nav-links">
                            About
                        </Link>
                    </li>
                    <li className="nav-item">
                        <Link to="/" className="nav-links">
                            Pricing
                        </Link>
                    </li>
                    <li className="nav-item">
                        <Link to="/" className="nav-links">
                            Sign up
                        </Link>
                    </li>
                </ul>
            </div>
        </nav>
    </>
)}

还有进一步的 css：

.navbar-container {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
max-width: 1500px;}

.nav-menu {
width: 60vw;
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 10px;
list-style: none;
text-align: center;
justify-content: end;
margin-right: 2rem;}

.nav-item {
height: 80px;}

.nav-links {
display: flex;
align-items: center;
text-decoration: none;
justify-content: center;
height: 100%;
padding: 0 1.5rem;}

另外请注意，我对 React 非常陌生，并且根据教程进行此操作。

【问题讨论】：

visibility:hidden; ?
这也应该在反应中起作用，你可能在你的 css 文件中的某个地方覆盖了你当前的样式。检查开发工具，或者简单地在文件末尾使用!important 来查看它是否有效。如果没有，那么您必须分享更多代码。
在浏览器中更改样式可以帮助您了解缺少的内容。正如@ParsaArvaneh 所说，如果它适用于一个简单的 HTML 网站，它也应该适用于 react。

标签： css reactjs

【解决方案1】：

你可以通过

background-color: ${({ useTransparent }) =>
    useTransparent ? "transparent" : "rgba(61, 39, 84, 1)"};

到 const NavBarContainer 让我们说。然后使用props 将const { useTransparent } = props; 传递给NavBar 函数/类组件，然后在HomePage 中也将useTransparent 添加到NavBar。

【讨论】：

【解决方案2】：

background-color: rgba(0,0,0,0.0) 可以工作。可能发生的情况是该属性被覆盖，或者它们是包含在导航栏中的元素，其指定的背景颜色与导航栏的大小相同。

我建议右键单击元素并检查导航栏，然后查看样式。如果有一个背景颜色覆盖了你的背景颜色，它会告诉你它来自哪里。您还可以通过这种方式检查可能具有非透明背景颜色的导航栏的子元素。

【讨论】：