创建一个不透明/透明的 gatsby-background-image

Question

代码沙盒：https://codesandbox.io/s/awesome-gagarin-bss0k?file=/src/pages/index.js

---

使用gatsby-background-image，我想要一个透明的背景图像。

内联样式不起作用。 用我想要的不透明度来分配一个类是行不通的。

import BackgroundImage from 'gatsby-background-image';
    ...

      <BackgroundImage
        fluid={data.placeholderImage.childImageSharp.fluid}
        Tag="section"
        role="img"
        className="bgImage"
        style={{ opacity: 0.03 }}
      >
        <SEO title="Home" />
        <h1>Hi people - Gatsby3</h1>
        <p>Welcome to your new Gatsby site.</p>
        <p>Now go build something great.</p>
        <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }} />
        <Link to="/page-2/">Go to page 2</Link> <br />
        <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
      </BackgroundImage>
    ...

    .bgImage{
        object-fit: 'contain';
        width: '100%';
        opacity: 0.03;
        background-color: rgba(0,0,0,0.03)
    }

    .bgImage::before{
        opacity: 0.03;
    }

将不透明度设置为!important 有效，但背景图像的所有子项也都是透明的。我只希望背景图片是透明的。

.bgImage{
            object-fit: 'contain';
            width: '100%';
            opacity: 0.03 !important;
            background-color: rgba(0,0,0,0.03)
        }

我已尝试将.bgImage 的所有子代分配为不透明，但这不起作用，它们仍然是透明的。

.bgImage * {
        opacity: 1 !important;
    }

---

如果我在浏览器中进入我的 html 并将伪类编辑为

.bgImage.gbi--640152265-sAbmzRF46cBzS5AanAhNU8::before {
z-index: -100;
background-image: url('https://bss0k-44413.sse.codesandbox.io/static/6d91c86c0fde632ba4cd01062fd9ccfa/630fb/gatsby-astronaut.png');
opacity: 0.03;
}

但是我将如何在代码中做到这一点？

Answer 1

背景图像本身的不透明度在您的背景容器的:before 伪选择器中设置，因此您需要创建一个选择器，其中包含您的背景图像容器并直接访问您:before，当然，您'在这种情况下需要使用!important...类似的东西：

.bgImage::before{
 opacity: .03 !important;
}

您也可以通过替换 :after 伪选择器来完全覆盖样式：

.bgImage::after{
 opacity: .03 !important;
}