时间戳

首页 > 解决方案 > 使用 Material-UI 的 ButtonBase 和 gatsby-background-image

reactjs - 使用 Material-UI 的 ButtonBase 和 gatsby-background-image

问题描述

我正在尝试实现 Material-UI复杂按钮演示，但使用 gatsby-background-image 提供图像，但无论我尝试做什么，我似乎都无法正确输入图像，这是我的最大努力到目前为止，用于替换 classes.imageSrc 跨度：

<BackgroundImage
  Tag="span"
  className={classes.imageSrc}
  fluid={post.frontmatter.featuredImage.childImageSharp.fluid}
  backgroundColor={`#040e18`}
/>

编辑：这是一个工作imageSrc范围的示例（填充post.frontmatter.featuredImage.childImageSharp.fluid.src，绕过 gatsby 的图像加载）

<span class="makeStyles-imageSrc-21" style="background-image: url(&quot;/static/8058f3f26913fea3b6a89a73344fe94a/14b42/salty_egg.jpg&quot;);"></span>

这是我的尝试输出的图像不加载留下灰色框的地方：

<span class="makeStyles-imageSrc-5 gbi--1866542702-sdWE3QALWtx7F9TPwtWxQm" style="background-position: 50% 40%; background-repeat: no-repeat; background-size: cover; position: relative; opacity: 0.99;">
    <style>
        .makeStyles-imageSrc-5.gbi--1866542702-sdWE3QALWtx7F9TPwtWxQm:before,
        .makeStyles-imageSrc-5.gbi--1866542702-sdWE3QALWtx7F9TPwtWxQm:after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #040e18;
        transition: none;
        background-position: center 40%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: center;
        background-position-y: 40%;
        }
        .makeStyles-imageSrc-5.gbi--1866542702-sdWE3QALWtx7F9TPwtWxQm:before {
        z-index: -100;
        background-image: url('http://localhost:8000/static/8058f3f26913fea3b6a89a73344fe94a/14b42/salty_egg.jpg');
        background-image: url([REMOVED BASE64 IMAGE PREVIEW FOR SO]);
        opacity: 0; 
        }
        .makeStyles-imageSrc-5.gbi--1866542702-sdWE3QALWtx7F9TPwtWxQm:after {
        z-index: -101;
        background-image: url('http://localhost:8000/static/8058f3f26913fea3b6a89a73344fe94a/14b42/salty_egg.jpg');
        opacity: 1;
        }
    </style>
</span>

标签： reactjsmaterial-uibackground-imagegatsby

解决方案

我想到了！position: "absolute"您必须通过将其传递给 the 的style道具BackgroundImage或将其标记!important为imageSrcin来强制执行useStyles

推荐阅读