Question

我有一个由多个垫子卡组成的垫子卡。我想给我的父垫子卡提供背景图像，并且位置应使所有子垫子卡都位于图像的中心。我尝试使用css。当我在基本的笔记本电脑屏幕上时，图像会集中显示，但是当我移至更大的屏幕时，位置会发生变化。我希望两个屏幕上的外观都相同。请提供帮助。

这是我的Mat卡CSS：

.card {
    width: 100%;
    margin: 2em;
    height: 100%;
    background-image: url("/../assets/img/test.png");
    background-size: cover;
    background-position-y: -20vh;
}

这是我的闪电战：https://stackblitz.com/edit/angular-stwmuu 我想要一张背景图像，在这些垫卡的后面运行。

Answer 1

我通过将背景图像添加到包含卡片的元素中，然后使卡片背景颜色透明来进行修复。

在我的情况下，元素是 mat-grid-tile ，并且具有内联样式，看起来像这样

<mat-grid-tile style="background-image: url('/../assets/image.jpeg');">
    <mat-card style="background-color: rgba(51, 170, 51, .1)">
        <mat-card-title>Iris</mat-card-title>
        <mat-card-content>Lencwadi futhi ibonisa ukuhlelwa kwenhlangano yoFakazi ngaphansi kweNdikimba Ebusayo, kuhlanganise namabandla anezindikimba zabadala, iKomiti Eyengamele [yeGatsha] yamalungu ayisikhombisa yakulelozwe, kanye nababonisi besifunda nabesigodi.</mat-card-content>
    </mat-card>
</mat-grid-tile>

将背景图像添加到席卡

1 个答案: