Question

我只是在学习sass，遇到了@function这似乎是一个非常有用的工具。

我的问题是，在使用背景图像的情况下，是否可以使用这种功能来确定颜色和背景之间的对比度。我已经读过，该值是从hsl值计算得出的。我猜想这将需要对每个图像进行某种形式的图像评估。我想到的用例是我只是出于某种目的而做的netflix克隆。标语包含一些来自tmdb api的图像，但其中一些图像使默认的白色文本难以阅读。有没有一种方法可以在一定条件下使用亮度功能评估图像。

如果没有，那么任何人都可以建议使用什么替代方法。

谢谢。

Answer 1

如果我正确阅读了您的问题，则可以通过组合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);
}

jsFIDDLE

编辑：如果您正在寻找基于背景图片的解决方案，则可以将filter:invert()选项与background-clip一起使用。检查以下文章。

methods-contrasting-text-backgrounds

sass亮度功能查询

1 个答案: