1

CodeSandbox：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;
}

在此处输入图像描述

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

4

1 回答 1

1

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

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

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

.bgImage::after{
 opacity: .03 !important;
}
于 2020-06-08T05:07:40.773 回答