在 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');
}
我尝试在 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');
}