6

这可能是一个棘手的问题。

我有一个 php 函数，它返回一个rgba()带有参数的颜色值$alpha。

function colorWheel($alpha) {

   "rgba(170, 135, 178, ".$alpha.")"
   …
}

所以打电话的时候……</p> 

.title { color: <?php echo colorWheel(.8); ?>; }

……我明白了rgba(170, 135, 178, .8);

我遇到的问题是颜色是“透明的”并显示“叠加层”。

在此处输入图像描述

然而我真正喜欢的只是色值的80%！ 没有任何透明覆盖。

现在的问题是如何解决这个问题？

任何有创意的想法如何做到这一点？我不需要使用rgba()它，这只是我想到的最简单的事情。有没有一种CSS方法不混合具有 alpha 值的重叠形状？

或者是否有一个 php 解决方案来计算80%的版本rgb(170, 135, 178)？重要的是，此计算与函数一起动态工作，因为函数中有更多颜色 -这是“如何基于日期和随机返回颜色值？”的后续问题。！

先感谢您。

4

3 回答 3

1

问题是您对“80% 颜色”的定义实际上是什么。

CSS 目前有 2 种颜色空间可用：RGB 和 HSL（实际上得到了很好的支持）。

您可以进行以下 RGB 计算：

function colorWheel($alpha) {

    'rgba('.$r*$alpha.','.$g*$alpha.','.$b*$alpha.', 1)';
    …
}

或者您可以采用 HSL 并将亮度（和或饱和度）通道降低 20%。在进行诸如使颜色更深/更亮之类的操作时，HSL 颜色空间更加直观。

function colorWheel($alpha) {

    "hsla($h,$s,".$l*$alpha.",1)";
    // or
    // ("hsla($h, "+$s*$alpha+", $l, 1)";)
    …
}

这些都产生（略微）不同的结果。

颜色空间可以通过一些不太复杂的公式相互转换。也许你应该看看一个随机的颜色选择器（例如这个或那个），然后决定哪种计算方式最适合你。

于 2013-01-18T12:46:10.020 回答
0

应该这样做：

function colorWheel($alpha) {
    $r = round(170 * $alpha);
    $g = round(135 * $alpha);
    $b = round(178 * $alpha);
    "rgba($r, $g, $b, 1)";
    …
}

好吧，这会使颜色更深，如果你想让它更亮，你必须将 alpha 设置为 > 1 的值，并检查 r、g 或 b 是否超过 255，如果超过，则将其设置为 255

于 2013-01-18T12:25:57.067 回答
0

要使用不透明度模拟颜色，您还需要背景颜色。可以说，那R,G,B是背景颜色组件，r,g,b您是颜色组件。如果要在特定背景上模拟不透明度颜色，则应取同一运河的相应值并添加特定权重：

r = r*alpha + R*(1-alpha)
g = g*alpha + G*(1-alpha)
b = b*alpha + B*(1-alpha)

让我们举个简单的例子。您想 在背景（白色）alpha = 0.8 上使用颜色（红色）。这意味着，你需要总和 80% 你的颜色 + 20% BG：rgb(r,g,b) = rgb(255,0,0)rgb(R,G,B) = rgb(255,255,255)

r = 255*0.8 + 255*0.2 = 255
g = 0*0.8 + 255*0.2 = 51
b = 0*0.8 + 255*0.2 = 51
于 2013-01-18T12:38:51.630 回答