Как стилизовать только фоновое изображение в div, используя CSS, а не содержимое между тегами div?

Question

У меня есть приложение Angular, где я использую общее фоновое изображение во всем приложении. Я поместил это изображение, используя css и теги div, которые закрывают мою розетку маршрутизатора, и теперь хочу изменить стиль изображения, изменив прозрачность. Как я могу сделать так, чтобы стиль не влиял на все, что заключено в этот тег div? Нет свойства css для непрозрачности фона.

HTML

<app-nav-bar *ngIf="auth.loggedIn()"></app-nav-bar>
<div class="background">
    <router-outlet></router-outlet>
</div>

CSS

.background {
background-image: url('/assets/imgs/contour.jpg');
}

Answer 1

Вы можете использовать псевдоэлемент :after или :before.

В этом случае ваш CSS станет примерно таким:

.background:after {
  content: "";
  background-image: url('/assets/imgs/contour.jpg');
  opacity: 0.2;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}

Здесь вы можете изменить opacity на все, что вам нужно.

Вот JSFiddle, демонстрирующий это: https://jsfiddle.net/9frz56xc/