来自 sass 的背景图像未呈现

Question

image

下图是我的文件夹结构，我尝试使用 node-sass 添加背景图像，即使在显示渲染消息后仍检测到节点，与背景图像相关的 scss URL 未添加到 main.css 任何人请提出解决方案

main.scss

@import 'config';
*{
   box-sizing:border-box;
}
body {
  background-color: $primary-color;
  height: 100%;
  color: $secondary-color;
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.5;
}
// Headings
h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  //This exactly means h1.lg-heading
  &.lg-heading {
    font-size: 6rem;
  }
  &.sm-heading {
    margin-bottom: 2rem;
    padding: 0.2rem 1rem;
    background: #D8C3A5(darken($primary-color, 2), 0.5);
  }
}

a {
  color: $secondary-color;
}
header{
    position: fixed;
    z-index: 2;
    width:100% ;
}

.text-secondary{
color: $text-color;
}
main{
    padding: 4rem;
    height: 100%;

    .socials{
        margin-top: 1rem;

        a{
            padding: 0.4rem;

            &:hover{
                color:$text-color;
               @include easeOut();
            }
        }
    }
    &#home{
        overflow: hidden;
        h1{
            margin-top:20vh;
        }
    }
}

config.scss

$primary-color: #eae7dc;
$secondary-color: #e85a4f;
$text-color: #123C69;
$show-home-img: true;
$home_img: image-url('./img/bg.jpg');
$background-opacity: 0.9; 

@mixin background {

    @if $show-home-img {
        
        &#bg-img{
            background:$home_img no-repeat;
            background-attachment: fixed;
            background-size: cover;
            &:after{
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                background-color: rgba($primary-color,$background-opacity);
            }
        }
    }
}


@mixin easeOut{
    transition: color 0.5s ease-out
}

index.html

<body id="bg-img">
    <header>
        <div class="menu-btn">
            <div class="btn-line"></div>
            <div class="btn-line"></div>
            <div class="btn-line"></div>


            <nav class="menu-branding">
                <ul class="menu-nav">
                    <li class="nav-item">
                        <a href="/">Home</a>
                    </li>
                    <li class="nav-item">
                        <a href="">About</a>
                    </li>
                    <li class="nav-item">
                        <a href="">Projects</a>
                    </li>
                    <li class="nav-item">
                        <a href="">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <main id="home">
        <h1 class="lg-heading">
            Tanisha <span class="text-secondary">Gupta</span>
        </h1>
        <h2 class="sm-heading"> Web Developer, Designer & Curator</h2>
        <div class="socials">
            <a href="">
                <i class="fab fa-twitter fa-2x"></i>
            </a>
            <a href="">
                <i class="fab fa-linkedin fa-2x"></i>
            </a>
            <a href="">
                <i class="fab fa-medium fa-2x"></i>
            </a>
            <a href="">
                <i class="fab fa-github fa-2x"></i>
            </a>
        </div>
    </main>
    <script src=js/main.js></script>
    <!-- FontAwesome -->
    <script src="https://kit.fontawesome.com/c28f07619f.js" crossorigin="anonymous"></script>
</body>

</html>

Answer 1

图像不会呈现，因为没有像 background: image-url() 这样的属性只是设置 url()。你应该像这样修改属性

$home_img: url('https://picsum.photos/seed/picsum/200/300');

#bg-img {
  background: $home_img no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

<div id="bg-img" style="height: 600px; width: 600px;">
</div>

Codepen link

更新：

我已经更新了我的答案，在用你的分析后 HTML 我找到了问题发生的地方。背景图像不会出现，因为您为同一标签添加了一个伪元素，它将与背景图像重叠。考虑删除 background-color

另外不要忘记在 main.scss 文件中调用 mixin

在您的 main.scss 文件顶部添加 @include background()

#bg-img{
            background:$home_img;
            background-attachment: fixed;
          z-index: 2;
            background-size: cover;
            &:after{
               // content: "";
                position: absolute;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                background-color: rgba($primary-color,$background-opacity);
            }
       }

删除 body 标签的这个 ::after 元素

已更新 codpen link

来自 sass 的背景图像未呈现

Background-image from sass is not rendered

css

sass

node-sass