问题描述
我正在尝试使用渐变颜色获得不同的 div,从深到浅。
我可以看到我的代码编辑如何使颜色变亮,但我看不到更暗的效果。我查看了代码,一切正常。淡出效果有效,但淡入效果无效 - 它是相同的。当我查看生成的 css 文件时,我发现背景颜色与 $color-base 值相同。为什么淡入效果不受欢迎?
SCSS:
@if $k==1 {
$color-base: red;
}
@else if $k==2 {
$color-base: blue;
}
@else {
$color-base: green;
}
.container-#{$k} {
.base-color {
background-color: $color-base;
}
@for $i from 4 through 1 {
.darken-#{$i} {
background-color: fade_in($color-base,0.2 * $i);
.color-Box-text {
color: red;
}
}
.lighten-#{$i} {
background-color: fade_out($color-base,0.2 * $i);
.color-Box-text {
color: black;
}
}
}
}
}
HTML:
<div class="Box darken-4"><span class="color-Box-text">Darken 4</span></div>
<div class="Box darken-3"><span class="color-Box-text">Darken 3</span></div>
<div class="Box darken-2"><span class="color-Box-text">Darken 2</span></div>
<div class="Box darken-1"><span class="color-Box-text">Darken 1</span></div>
<div class="Box base-color"><span class="color-Box-text">Base color</span></div>
<div class="Box lighten-1"><span class="color-Box-text">Lighten 1</span></div>
<div class="Box lighten-2"><span class="color-Box-text">Lighten 2</span></div>
<div class="Box lighten-3"><span class="color-Box-text">Lighten 3</span></div>
<div class="Box lighten-4"><span class="color-Box-text">Lighten 4</span></div>
</div>
<div class="mycontainer container-2">
<div class="Box darken-4"><span class="color-Box-text">Darken 4</span></div>
<div class="Box darken-3"><span class="color-Box-text">Darken 3</span></div>
<div class="Box darken-2"><span class="color-Box-text">Darken 2</span></div>
<div class="Box darken-1"><span class="color-Box-text">Darken 1</span></div>
<div class="Box base-color"><span class="color-Box-text">Base color</span></div>
<div class="Box lighten-1"><span class="color-Box-text">Lighten 1</span></div>
<div class="Box lighten-2"><span class="color-Box-text">Lighten 2</span></div>
<div class="Box lighten-3"><span class="color-Box-text">Lighten 3</span></div>
<div class="Box lighten-4"><span class="color-Box-text">Lighten 4</span></div>
</div>
<div class="mycontainer container-3">
<div class="Box darken-4"><span class="color-Box-text">Darken 4</span></div>
<div class="Box darken-3"><span class="color-Box-text">Darken 3</span></div>
<div class="Box darken-2"><span class="color-Box-text">Darken 2</span></div>
<div class="Box darken-1"><span class="color-Box-text">Darken 1</span></div>
<div class="Box base-color"><span class="color-Box-text">Base color</span></div>
<div class="Box lighten-1"><span class="color-Box-text">Lighten 1</span></div>
<div class="Box lighten-2"><span class="color-Box-text">Lighten 2</span></div>
<div class="Box lighten-3"><span class="color-Box-text">Lighten 3</span></div>
<div class="Box lighten-4"><span class="color-Box-text">Lighten 4</span></div>
</div>
解决方法
函数 fade-in()
的作用与 opacify()
相同,并且根据 documentation:
opacify()
函数将 Alpha 通道增加固定量。
您的 $color-base
值都是不透明的,因此 fade-in()
函数不适用,因为它们的 Alpha 通道已经具有最大值。如果您尝试使用 alpha 值低于 1
的基色,您会发现您的代码运行良好。