React styled-component：如何在顶部图像背景 css 上创建背景覆盖

Question

我正在研究如何使用 React 样式组件创建一个包含背景图像和黑色半透明覆盖层的单个组件

这里有一个例子：

Answer 1

使用以下代码解决：

const ParallaxImgStyled = styled.div`
    background-image: url(${(props) => props.imgUrl});
    background-size: cover;

    /* Set a specific height */
    min-height: 450px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    
    position: relative;
    z-index: 0;

    &:before {
        background: rgba(0, 0, 0, 0.6);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1;
    }

`;