如何使元素的背景透明？

Question

我無法使某些元素的背景對移動視圖透明。 我正在使用反應。

我嘗試為幾乎每個 class 添加具有transparent值background-color和background ，但它沒有正確刪除背景。 有沒有人有建議如何解決這個問題？

標准視圖：

移動視圖：

js：

export const NavBar = () => {
  return (
    <nav className="flex custom-nav">
      <ul className="nav-list flex">
        <li><a href="#">Home</a></li>
        <li><a href="#">Skills</a></li>
        <li><a href="#">Projects</a></li>
      </ul>
      <span className="social-icon-list">
          <a href="#"><img className="social-icon" src={socialIcon1} 
          alt=""/></a>
          <a href="#"><img className="social-icon" src={socialIcon2} 
           alt=""/></a>
        </span>
      <button>Let's Connect</button>
    </nav>
  );
}

我的js文件的css

* {
    font-family: Centra, sans-serif;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none !important;
    color: #fff !important;
    font-weight: 400;
    opacity: 0.85;
}

.flex {
    display: flex;
    gap: 1.5rem;
}

nav {
    padding: 20px 50px 0 0;
    justify-content: end;
    align-items: center;
}

.nav-list {
    list-style-type: none;
    font-size: 1.5em;
    align-items: center;
    margin-top: auto;
    padding: 0;
    background-color: transparent;
}

button {
    background-color: transparent;
    border: 1px solid #fff;
    padding: 18px 34px;
    font-size: 1.3em !important;
    flex-shrink: 0;
    color: #fff;
    opacity: 0.85;
}

.social-icon-list {
    flex-shrink: 0;
}

.social-icon {
    width: 42px;
    border-radius: 50% !important;
    margin-right: 6px;
    background-color: white;
    opacity: 0.85;
}

@media (max-width: 44em) {
    .custom-nav {
        position: fixed;
        inset: 0 0 0 30%;
        background: aqua;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .nav-list {
        flex-direction: column;
        padding: min(25vh, 5rem) 0 0 0;
        margin: 0;
        gap: 1rem;
    }

    button {
        margin: 0;
    }
}

整個應用程序的 css

* {
    background-color: #262626;
}

Answer 1

你的問題在這里：

* {
    background-color: #262626;
}

這將設置絕對所有內容的背景顏色，因此您必須為絕對所有內容覆蓋它。

如果你想要一個“全局”背景，只在你的根元素上設置它。 一般來說， html或body是很好的容器：

body {
    background-color: #262626;
}