【Sass中级】如何根据背景颜色动态修改文本颜色
2014-05-26 00:00
615 查看
本文由大漠根据Sebastian Ekström的《How to dynamically change text color based on a background color》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明原作者相关信息http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass。
——作者:Sebastian Ekström
——大漠
设计选择文本颜色(前景色)一般都是在背景颜色的基础做选择。如果背景颜色是亮色,文本颜色就是暗色;如果背景颜色是暗色,文本颜色就亮色。因为这是亮色和暗色的配合,文本更容易阅读。
那么我们如何利用Sass在背景色的基础上选择合适的文本颜色呢?
我们将以通知信息(notification message)组件做为示例。我们先从HTML结构开始:
我们有三种类型的通知信息:确认、预警和警告。我们希望他们有不同的背景色和文本颜色。确认使用绿色(confirm),***表示预警(warning),红色表示警告(alert)。而我们的文本颜色是根据背景颜色的对比度来实现。
我们来创建一个Sass函数,使我们变得更轻松:
在这里,我们使用了Sass自带的lightness()函数来确定背景颜色是哪种类型。lightness()是Sass内置的一个函数,他返回的值是一个颜色的RGB值,这个值介于0到100。其中0表示最暗,而100表示最亮。
lightness()是Sass中的一个内置函数,说得更为确切一点,lightness($color)所表示的是从一个颜色中获取亮度(lightness)值。例如lightness(#7ab)函数,其返回的是#7ab颜色的亮度值,此值为60%。有关于Sass内置颜色相关函数的详细介绍,可以阅读前面写的一篇文章:《Sass基础——颜色函数》,将帮助你对Sass内置的颜色函数有一个深入的了解。——@大漠
所以这个函数功能告诉我们,如果我们调用的颜色,其“lightness”(亮度)大于50,这意味着我们引入的是一个浅(亮)颜色,反之,其返加的值小于50就是一个深(暗)颜色,因此我们需要确保他们有一个良好的对比色。否则我们返回的是一个亮色。
我们来看一个具体的实例:
我们有了这个功能,我们只要知道通知信息(notification message)的背景颜色,就会动态返回需要的文本颜色。
下面的示例就是我们需要的效果:
这样做是件美妙的事情,如果我们修改了背景颜色变量值,文本颜色就会动态更新到适合背景颜色。
这是如何使用Sass动态生颜色的一个简单的示例。我敢肯定你能想到这个办法。如果你有使用Sass颜色函数的其他经验,欢迎在下面的评论中与我一起分享。
brightness()函数提供了一个更先进的获取颜色亮度值的Sass函数功能。详细请参阅John W. Long写的brightness()函数功能。
brightness()函数的详细代码如下所示:
扩展阅读
有关于Sass关于颜色功能方面的其他教程:
Module: Sass::Script::Functions
Sass基础——颜色函数
Sass & Compass Color Functions
译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!
如需转载烦请注明出处:
英文出处:http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass
中文译文:/article/1214311.html
——作者:Sebastian Ekström
——大漠
设计选择文本颜色(前景色)一般都是在背景颜色的基础做选择。如果背景颜色是亮色,文本颜色就是暗色;如果背景颜色是暗色,文本颜色就亮色。因为这是亮色和暗色的配合,文本更容易阅读。
那么我们如何利用Sass在背景色的基础上选择合适的文本颜色呢?
我们将以通知信息(notification message)组件做为示例。我们先从HTML结构开始:
<p class="notification notification-confirm">Confirmation</p> <p class="notification notification-warning">Warning</p> <p class="notification notification-alert">Alert</p>
我们有三种类型的通知信息:确认、预警和警告。我们希望他们有不同的背景色和文本颜色。确认使用绿色(confirm),***表示预警(warning),红色表示警告(alert)。而我们的文本颜色是根据背景颜色的对比度来实现。
我们来创建一个Sass函数,使我们变得更轻松:
@function set-notification-text-color($color) { @if (lightness($color) > 50) { @return #000000; // 如果背景色为亮色,返回的文本色为暗色 } @else { @return #ffffff; // 如果背景色为暗色,返回的文本色为亮色 } }
在这里,我们使用了Sass自带的lightness()函数来确定背景颜色是哪种类型。lightness()是Sass内置的一个函数,他返回的值是一个颜色的RGB值,这个值介于0到100。其中0表示最暗,而100表示最亮。
lightness()是Sass中的一个内置函数,说得更为确切一点,lightness($color)所表示的是从一个颜色中获取亮度(lightness)值。例如lightness(#7ab)函数,其返回的是#7ab颜色的亮度值,此值为60%。有关于Sass内置颜色相关函数的详细介绍,可以阅读前面写的一篇文章:《Sass基础——颜色函数》,将帮助你对Sass内置的颜色函数有一个深入的了解。——@大漠
所以这个函数功能告诉我们,如果我们调用的颜色,其“lightness”(亮度)大于50,这意味着我们引入的是一个浅(亮)颜色,反之,其返加的值小于50就是一个深(暗)颜色,因此我们需要确保他们有一个良好的对比色。否则我们返回的是一个亮色。
我们来看一个具体的实例:
$notification-confirm: hsla(101, 72%, 37%, 1); // Green $notification-warning: #ffc53a; // Yellow $notification-alert: rgb(172, 34, 34); // Red %notification { border-radius: 10px; display: block; font-size: 1.5em; font-family: sans-serif; padding: 1em 2em; margin: 1em auto; width: 30%; text-align: center; } .notification { @extend %notification; } .notification-confirm { background: $notification-confirm; color: set-notification-text-color($notification-confirm); } .notification-warning { background: $notification-warning; color: set-notification-text-color($notification-warning); } .notification-alert { background: $notification-alert; color: set-notification-text-color($notification-alert); }
我们有了这个功能,我们只要知道通知信息(notification message)的背景颜色,就会动态返回需要的文本颜色。
下面的示例就是我们需要的效果:
这样做是件美妙的事情,如果我们修改了背景颜色变量值,文本颜色就会动态更新到适合背景颜色。
这是如何使用Sass动态生颜色的一个简单的示例。我敢肯定你能想到这个办法。如果你有使用Sass颜色函数的其他经验,欢迎在下面的评论中与我一起分享。
brightness()函数提供了一个更先进的获取颜色亮度值的Sass函数功能。详细请参阅John W. Long写的brightness()函数功能。
brightness()函数的详细代码如下所示:
//_brightness.scss $red-magic-number: 241; $green-magic-number: 691; $blue-magic-number: 68; $brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number; @function brightness($color) { // Extract color components $red-component: red($color); $green-component: green($color); $blue-component: blue($color); // Calculate a brightness value in 3d color space between 0 and 255 $number: sqrt((($red-component * $red-component * $red-magic-number) + ($green-component * $green-component * $green-magic-number) + ($blue-component * $blue-component * $blue-magic-number)) / $brightness-divisor); // Convert to percentage and return @return 100% * $number / 255; } @function contrasting-color($color, $light, $dark) { @if brightness($color) < 65% { @return $light; } @else { @return $dark; } } //调用方法 $dark-background-color: #333; $light-text-color: white; $light-background-color: #eee; $dark-text-color: black; .dark-background { background: $dark-background-color; color: contrasting-color($dark-background-color, $light-text-color, $dark-text-color); } .light-background { background: $light-background-color; color: contrasting-color($light-background-color, $light-text-color, $dark-text-color); }
扩展阅读
有关于Sass关于颜色功能方面的其他教程:
Module: Sass::Script::Functions
Sass基础——颜色函数
Sass & Compass Color Functions
译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!
如需转载烦请注明出处:
英文出处:http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass
中文译文:/article/1214311.html
相关文章推荐
- C# 如何在PDF文档中根据关键字查找文本并给文本设置背景颜色
- C++如何修改SDI程序的默认背景颜色
- 根据数据库动态设定gridview单元格的背景颜色
- 如何修改putty窗口中字体与背景颜色
- MFC对话框如何使用工具栏并修改工具栏的背景颜色与自绘对话框统一
- ExtJS4.1.1 设置表格背景颜色 修改文本颜色 在表格中插入图片
- 如何使STATIC控件的背景透明以及动态改变控件文本内容时闪烁的问题
- 如何用PS修改证件照的背景颜色
- Photoshop实现修改gif格式动态图片,如切换背景颜色等.....
- [myeclipse] 中如何修改背景颜色?
- extjs的grid控件如何根据值来设置某行的背景颜色
- C++如何修改SDI程序的默认背景颜色
- 如何让edit control具有不同的文本颜色和背景颜色
- 卸载EditPlus,装上Notepad++,如何修改Notepad++背景颜色???
- VC编程中如何设置对话框的背景颜色和静态文本颜色
- 如何修改CEdit&CB中文本的字体大小及颜色
- ABAP--如何在SMARTFORMS里动态打印背景颜色
- 如何修改电脑背景颜色??
- 如何修改jquery easyui select中option背景颜色
- 如何通过代码动态改变android的窗口背景颜色