Фоновое изображение из sass не отображается

ProgramBox

Фоновое изображение из sass не отображается

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#css #sass #node-sass

Вопрос:

Следующее изображение-это моя структура папок, я попытался добавить фоновое изображение с помощью 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
  amp;.lg-heading {
    font-size: 6rem;
  }
  amp;.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;

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

конфигурация.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 {
        
        amp;#bg-img{
            background:$home_img no-repeat;
            background-attachment: fixed;
            background-size: cover;
            amp;: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 amp; 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>

1. Я могу понять вашу проблему, но я не могу воспроизвести эту проблему с помощью скриншота. пожалуйста, поделитесь своим кодом здесь

2. Нам нужно больше информации. Изображение bg не загружено или оно не добавлено в сгенерированный CSS-файл? Это две совершенно разные вещи. Если он не добавлен в SCSS, проверьте процесс сборки. Если он добавлен, проверьте вкладку «Сеть» в браузере, чтобы узнать, какой файл извлечен.

3. @viira именно то, что scss не добавляется в сгенерированный css

4. Затем вы можете добавить свой код scss здесь

5. @Viira только что добавила оба файла scss, я надеюсь, что это даст вам лучшее понимание проблемы

Ответ №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>

Кодовая ссылка

Обновить:

Я обновил свой ответ, проанализировав его с помощью вашего HTML-кода, я нашел, где возникает проблема. Фоновое изображение не появится, потому что вы добавили псевдоэлемент для того же тега, он будет перекрывать фоновое изображение. подумайте о том, чтобы удалить background-color

Также не забудьте назвать миксин в вашем main.scss файле

Добавьте @include background() в верхней части вашего main.scss файла

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

Удалите этот ::after элемент для body тега

Обновлена ссылка на кодпен

1. изменен $home_img: url(‘./img/bg.jpg’); к этому и тому, что вы сказали, но это не работает, было бы здорово, если бы вы могли предложить какой-либо другой подход

2. Тогда добавьте и свой html-код

3. Добавлено index.html а также, пожалуйста, проверьте

4. ДА. Я нашел проблему, я обновлю ее в своем ответе. Подождите

5. Большое вам спасибо за помощь, которая сработала

Метки: Фоновое изображение из sass не отображается