如何在 offcanvass 中使用 css 去除灰色部分（背景）？

Question

我正在使用 react-bootstrap，但我不知道如何使用 css 删除背景或灰色区域。我不想从我的反应组件代码中禁用背景，因为它不再支持允许在外部单击时关闭画布的操作。

这是示例图片：

function AdminOffcanvas() {
    const [show, setShow] = useState(true);

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    return (
        <>
            <section>
                <Navbar className="nav fixed-top ps-2 pe-2 sidenav-green" expand="lg">
                    <Navbar.Brand href="#home" className="fw-bold"><img className="davao-logo" src={dvologo} width="200px" height="40px" alt="logo" /></Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav" className="right-aligned">
                        <Nav >
                            <Nav.Link href="#link">Link</Nav.Link>
                            <NavDropdown align="end" id="basic-nav-dropdown" className="text-light"
                                title={
                                    <span>
                                        <IconContext.Provider value={{ size: "1.5rem" }}>
                                            <BsPersonFill />
                                        </IconContext.Provider>
                                    </span>} >
                                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                                <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                                <NavDropdown.Divider />
                                <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                            </NavDropdown>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </section>

            <section className="pt-5 mt-5">
                <Button variant="primary" onClick={handleShow}>
                    Launch
                </Button>

                <Offcanvas show={show} onHide={handleClose} className="min-media text-light">
                    <Offcanvas.Header closeButton>
                        <Offcanvas.Title>Offcanvas</Offcanvas.Title>
                    </Offcanvas.Header>
                    <Offcanvas.Body>
                        Some text as placeholder. In real life you can have the elements you
                        have chosen. Like, text, images, lists, etc.
                    </Offcanvas.Body>
                </Offcanvas>
            </section>
        </>
    );
}

export default AdminOffcanvas;

这是我的 CSS：

:root{
  --offcanvasWidth: 270px;
  --topsidebarHeight: 66px;
}

.min-media{
  width: var(--offcanvasWidth);
  background-color: #1AA47F;
}

@media (min-width: 992px) {
  .backdrop::before{
    display: none;
  }
  .min-media{
    transform: none;
    visibility: visible;
    top: var(--topsidebarHeight);
    height: calc(100% - var(--topsidebarHeight));
  }
}

Answer 1

试试这个：

.offcanvas-backdrop.show {
    opacity: .0;
}