Question

我发现通过在文字上使用稍微透明的灰度颜色版本可以使文字在屏幕上显得更清晰。

例如，以下内容：

color: lighten(#A2A2A2, 11.5%)
color: rgba(#A2A2A2, 0.7);
background-color: #F6F6F6;

这些颜色的输出与同一背景上的color: #BBBBBB相同，只有[支持RGBa]它在屏幕上显得更清晰。要为不支持RGBa的浏览器创建后备，您会注意到我使用了lighten功能。我希望这一切都有意义......

为了让自己更轻松，我创建了一个简单的mixin来自动输出：

@mixin rgbaColor($color, $opacity, $lightness) {
  color: lighten($color,$lightness);
  color: rgba($color, $opacity);
}

问题是，永远确定十六进制代码应该是什么，以使文本看起来像#BBB，而实际上它是70％不透明度的另一种颜色。除此之外，创建后备更加困难 - 要轻松搞清楚＃A2A2A2减轻11.5％会输出#BBB。总而言之，它的努力超过了它的价值。 所以我的问题是，如果我将背景颜色和预期颜色（在本例中为#BBB）添加到该mixin中，是否有任何方式SASS可以计算70％不透明度的较暗颜色是什么，以获得预期的视觉输出颜色？

回过头来看，这有点令人困惑。所以这是有点我希望做的事情：

@include rgbaColor(#BBB, #F6F6F6, 0.7) 其中#BBB是预期的视觉颜色，＃F6F6F6是背景颜色，0.7是我喜欢文本集的不透明度。

使用类似的mixin：

@mixin rgbaColor($visualColor, $backgroundColor, $opacity) {
  // Crazy math to figure it out...
}

输出：

color: lighten(#A2A2A2, 11.5%)
color: rgba(#A2A2A2, 0.7);

我完全明白这是不可能的，但如果是的话，对我来说非常方便。谢谢！

如何创建一个输出预期颜色的mixin，但不透明度稍低？

0 个答案: