React styled-component：如何在顶部图像背景 css 上创建背景叠加层

【问题标题】：React styled-component: How can I create a background overlay on top image-background cssReact styled-component：如何在顶部图像背景 css 上创建背景叠加层
【发布时间】：2020-12-19 05:00:52
【问题描述】：

我正在寻找如何使用 react 样式的组件创建一个包含背景图像和黑色半透明叠加层的单个组件

这里是一个例子：

【问题讨论】：

标签： css reactjs image styled-components

【解决方案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;
    }

`;

【讨论】：