我只是在学习sass,遇到了@function这似乎是一个非常有用的工具。
我的问题是,在使用背景图像的情况下,是否可以使用这种功能来确定颜色和背景之间的对比度。我已经读过,该值是从hsl值计算得出的。我猜想这将需要对每个图像进行某种形式的图像评估。我想到的用例是我只是出于某种目的而做的netflix克隆。标语包含一些来自tmdb api的图像,但其中一些图像使默认的白色文本难以阅读。有没有一种方法可以在一定条件下使用亮度功能评估图像。
如果没有,那么任何人都可以建议使用什么替代方法。
谢谢。
答案 0 :(得分:2)
如果我正确阅读了您的问题,则可以通过组合if
和lightness()
来确定背景是暗还是亮,并使文本相反而实现。
$banner-text-colour: hsla(300, 76%, 72%, 1);
@function set-banner-text-color($colour) {
@if (lightness($colour) > 50) {
@return #000000;// if backgorund is light dark text
} @else {
@return #ffffff;// if background is dark light text
}
}
.banner-text {
background: $banner-text-colour;
color: set-banner-text-color($banner-text-colour);
}
编辑:
如果您正在寻找基于背景图片的解决方案,则可以将filter:invert()
选项与background-clip
一起使用。检查以下文章。