Я не могу установить фоновое изображение тела в angular

Question

Если я помещаю этот код в глобальные стили css, значит, он работает. Фоновое изображение устанавливается в теле страницы

body, html {
    height: 100%;
  }

  body {
  background-image: url("../../assets/img/p.jpg");
  background-size: cover;
  background-attachment: fixed;
  }

Но если я попробую то же самое на некоторых неглобальных css стиль, например какой-то компонент, значит, он не работает. Я проверил путь, он правильный. Также стили работают для всего, кроме фонового изображения тела.

Почему это происходит ?

Answer 1

вы не можете этого сделать из-за инкапсуляции стиля . всякий раз, когда вы стилизуете что-то внутри компонента css Angular, добавляет некоторые атрибуты Dynami c к этим селекторам, поэтому, например,

.some-class{
   color:red;
}

будет перенесено на (возможно)

   .some-class[ng-2312313]{
       color:red;
    }

а затем эти стили будут применены внутри вашего компонента, тем самым Angular защищает вас от того, чтобы не стилизовать какой-то компонент из другого компонента.

сказал, что стилизация основного элемента внутри компонента не будет работать. вы можете отключить инкапсуляцию с помощью свойства viewEncapsulation

@Component(.... encapsulation : ViewEncapsulation.NONE )

, но при этом вы выставите все свои стили вне компонента, так что это не лучший способ сделать это. вы можете добавить эти стили в глобальный CSS (как вы это делаете сейчас), это лучший способ сделать