创建不透明/透明的盖茨比背景图像

Question

CodeSandbox：https://codesandbox.io/s/awesome-gagarin-bss0k?file=/src/pages/index.js

---

我要使用gatsby-background-image，以获得透明的背景图像。

内联样式不起作用。 将类与我想要的不透明度关联起来是行不通的。

result

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

---

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

，就只能获得想要的效果（具有透明背景，网站的其余部分正常）。

.bgImage * {
        opacity: 1 !important;
    }

但是我该怎么用代码做到这一点？

Answer 1

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

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

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

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