javascript - 如何使用 CSS 仅设置 div 中的背景图像而不设置 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;
}

在这里，您可以将不透明度更改为您需要的任何值。

这是一个 JSFiddle 演示了这一点: https://jsfiddle.net/9frz56xc/