Question

我知道与该主题相关的答案很少，但是我没有找到有效的答案

我正在使用Angular 7作为框架，正在处理问题。

我有两个组成部分： -标头 -着陆

app.component.html

我将app.component.html都设置为连续显示它们：

<app-header></app-header>
<router-outlet></router-outlet>

我的header的固定height等于80px，而我的margin-top的{{1}}也是-80px

我认为即使使用router或router，也可以在header上显示opacity的图像，但结果却不是我所期望的（我愿意rgba上没有显示背景的透明背景

有什么建议吗？

Answer 1

 .header{
   text-align: center;
   top: 48.4px;
   position: absolute;
   height: 80px;
   width: 100%;
   z-index: 1;
   background-image: linear-gradient(to bottom, rgb(0, 0, 0), rgba(#ffffff, 0));

 .text{
   margin-top: 40px;
   border-radius: 30px;
   width: 200px;
   }
 }

这是scss，如果需要，您可以通过合并轻松地将其转换为css。此处的目的是使.header成为<header></header>的背景，并且文本将在此背景之上。如果您指定<router-outlet></router-outlet>的绝对位置和您指定的高度，它将与标题重叠！

第一div透明背景-角度7

1 个答案: