it-swarm.cn

如何在透明的BG上获得一致的“感知”颜色?

我在泡菜里.

我必须在半透明的黑色背景(85%Alpha)上制作表单控件(按钮,复选框,文本输入等)。

到目前为止,这是它们的外观:

Le checkboxes

注意前两个和后两个之间的区别。区别在于底部和右侧边框足够明亮,可以使外观看起来酷酷。问题?除了一个边界外,所有边界都是相同的颜色。

:(

由于它位于透明背景上,因此根据其背后的颜色,这些线条在您的眼中显得更亮或更暗!因此,整洁的嵌入外观将根据其内部来回变化。我一直希望有整洁的插图,该怎么办?是否有任何混合模式的技巧?

附言我忘了提到它最终将在Flash中显示,因此我开始对混合模式和内容有所兴趣。

编辑:我制作了另一个图像以更好地阐明问题(“太暗”和“太亮”我仍然指的是右边界和底边界)。

Another Example

6
Jonathan Dumaine

您可以使用屏幕或颜色减淡混合模式。或者,您可以仅使用纯白色,但将边框区域的透明度设置为希望其变亮的百分比。这与使用具有该亮度的灰色的屏幕混合模式相同。

编辑:
感知的亮度基于FG颜色作为背景的BG颜色,就像您在图像中看到的那样。现在发生的事情是,无论背景是什么,复选框高亮都以相同的颜色和阴影呈现。因此,如果背景明亮,则只会稍微增加一点发光度或根本不会增加发光度,但是如果背景很暗,那么它将大大增加发光度。这样会使高光显示不自然/不一致的外观。

解决的办法是使高光将BG亮度提高X%,以便使其始终比其相邻像素的亮度高X%。这样,无论背景如何,“可感知”的亮度将为X%(除非背景太亮,否则它将无法将亮度提高整个X%)。

2
Lèse majesté