带不透明黑框的角背景图像

Question

我正在尝试使用背景图像和带有文字和图像的黑色不透明框。但是当我尝试将CS​​S添加到不透明的盒子上时。背景也会改变。

app.component.html

<div class = "background">
<app-home></app-home>
</div>

app.component.css

.background {
   height: 100%;
   max-width: 100%;
   margin: 0;
   padding: 0;
   background: url("../assets/banner-bg.png") no-repeat Right Top fixed;
   background-size: auto auto;
}

app-home是我尝试在CSS中添加不透明框并对其进行更改的地方，我的背景图像样式也随之更改。背景图像在其不希望有的侧面上也有填充。