在 angular 中使用带有线性渐变 CSS 的自定义 material 主题

Using custom material theme with linear gradient CSS in angular

我尝试在 angular 网络应用中使用 CSS 线性渐变 属性 中的自定义主题。 我的 styles.css 看起来像这样:

@include mat.core();

@mixin component-theme($theme) {

    $my-theme-primary: map-get($theme, primary);
    $my-theme-accent: map-get($theme, accent);
    $my-theme-warn: map-get($theme, warn);

    $color-fond-titre: mat.get-color-from-palette($my-theme-primary, 100);
    $color-titre : mat.get-color-from-palette($my-theme-primary, darker);
    $color-panel: mat.get-color-from-palette($my-theme-primary, darker-contrast);


    $color-fond-titre-accent: mat.get-color-from-palette($my-theme-accent, 100);
    $color-titre-accent: mat.get-color-from-palette($my-theme-accent, darker);
    $color-panel-accent: mat.get-color-from-palette($my-theme-accent, darker-contrast);

    .active-selection
    {
        background-color: mat.get-color-from-palette($my-theme-primary, 500) !important;
        color: mat.get-color-from-palette($my-theme-primary, darker-contrast) !important;
    }

    .card-container-background
    {
        background-image: linear-gradient(70deg, mat.get-color-from-palette($my-theme-primary, darker-contrast) , mat.get-color-from-palette($my-theme-primary, 100))
                  url('assets/icons/store-cloth.png');
    }

我想在这样的模板中使用 class“card-container-background”:

<div id="zone-utility-container">
    <mat-card class="card-container-background">
---------------------------------------------------
    </mat-card>    
</div>

这段代码有什么问题?感谢您的帮助

您的背景图像定义不是有效的 CSS 值,每个选项都必须用逗号分隔,因此在您的情况下,您必须在 linear-gradient(... ) 像这样:

.card-container-background
{
    background-image: linear-gradient(70deg, mat.get-color-from-palette($my-theme-primary, darker-contrast) , mat.get-color-from-palette($my-theme-primary, 100)),
              url('assets/icons/store-cloth.png');
}