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

Question

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

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

内联样式不起作用。用我想要的不透明度分配 class 不起作用。

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 并编辑一个伪 class，我只能得到我想要的效果（透明背景，网站的其余部分是正常的）成为

.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;
}

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

Creating an Opaque / transparent gatsby-background-image

css

reactjs

gatsby

gatsby-image