CSS 还是 PHP？颜色是原始颜色的 80% 但没有“透明度”？答案

【问题标题】：CSS or PHP? color that is 80% of original but without "transparency"?CSS 还是 PHP？颜色是原始颜色的 80% 但没有“透明度”？
【发布时间】：2013-01-02 03:50:19
【问题描述】：

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

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

function colorWheel($alpha) {

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

所以打电话的时候……

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

…我收到rgba(170, 135, 178, .8);

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

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

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

有什么创意可以做到这一点吗？我不需要使用rgba()，这只是我想到的最简单的事情。是否有一种 CSS 方法不混合具有 alpha 值的重叠形状？

或者有没有 php 解决方案来计算 rgb(170, 135, 178) 的 80% 版本？重要的是，此计算与函数动态配合，因为函数中有更多颜色 - 这是"How to return a color-value based a date and random?" 的后续问题！

提前谢谢你。

【问题讨论】：

但这就是透明色的工作原理。我认为您希望在这些对象的整个容器上使用整体 opacity: .8;，而不是在每个对象上使用单独的 RGBA 颜色。
与其使用 alpha 值来获得“该颜色的 80%”表示，不如将其转换为 HSL 并降低其亮度或饱和度，然后再转换回 RGB 并使用那些值而不是修改 alpha 值。 RGBA 适用于 alpha..
我知道这就是透明度的工作原理:) 这就是我问的原因。不幸的是，具有这些颜色的物品不是同一个“容器”，而是相互重叠的不同对象。这就是为什么我还要求一个 php 答案。我只是想也许我错过了一些 CSS 设置。
什么的 80%？ Html 颜色空间 RBG 和 HSL。您可以采用 80% 的所有颜色通道或转换为 hsl 并将饱和度或亮度降低到 80%。
@Christoph 没关系！我还可以使用十六进制颜色创建数组。看到这个……stackoverflow.com/questions/14231823/………我只需要这个功能就可以这样工作。我只是想传递一个$alpha 参数并在返回的colorWheel() 中获得80% 的颜色版本。我不在乎我是否收到 rgba()、rgb() 或 #hex 返回。我只需要用 css 设置值。

标签： php css colors

【解决方案1】：

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

CSS 目前有 2 种颜色空间可用：RGB 和 HSL（实际上非常支持 well）。

您可以进行以下 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)";)
    …
}

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

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

【讨论】：

PHP 是否真的在字符串中插入$r*$alpha？我从来没有写过 PHP。

【解决方案2】：

应该这样做：

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

【讨论】：

如果你不使用alpha通道，实际上你不需要rgba（支持较少）。

【解决方案3】：

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

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

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

r = 255*0.8 + 255*0.2 = 255
g = 0*0.8 + 255*0.2 = 51
b = 0*0.8 + 255*0.2 = 51

【讨论】：

你确定这是对的吗？对我来说，我总是得到一个更暗的版本。而不是更轻的。