CSS или PHP? цвет, который на 80 % соответствует оригиналу, но без "прозрачности"?

Это может быть трудный вопрос.

У меня есть функция php, которая возвращает значение цвета в rgba() с аргументом $alpha.

function colorWheel($alpha) {

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

Поэтому при вызове...

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

… Я получаю rgba(170, 135, 178, .8);

Проблема, с которой я сталкиваюсь, заключается в том, что цвет "прозрачный" и показывает "наложения".

enter image description here

Однако то, что мне действительно нравится, - это всего лишь 80 % от значения цвета! Без каких-либо прозрачных накладок.

Теперь вопрос в том, как решить это?

Есть какие-нибудь творческие идеи, как это сделать? Мне не нужно использовать rgba() это просто самая простая вещь, которая пришла мне в голову. Есть ли CSS способ не смешивать накладывающиеся фигуры, которые имеют альфа-значение?

Или есть ли решение php для вычисления 80% версия rgb(170, 135, 178)? Важно, чтобы это вычисление работало динамически с функцией, потому что в функции больше цветов - это следующий вопрос к "Как вернуть цвет-значение, основанное на дате и случайном?"!

Заранее благодарю вас.

Author: Community, 2013-01-18
Source

3 answers

Это должно сделать:

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

Что ж, это делает цвет темнее, если вы хотите сделать его светлее, вам нужно установить альфа-значение > 1, а также проверить, превышает ли r, g или b значение 255, и установить его равным 255, если это так

 0
Author: x4rf41, 2013-01-18 12:25:57

Вопрос в том, каково ваше определение "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)";)
    …
}

Все это дает (немного) разные результаты.

Цветовые пространства могут быть преобразованы друг в друга с помощью некоторых не слишком сложных формул. Возможно, вам следует взглянуть на случайный выбор цветов (например, этот или тот), а затем решить, какой способ расчета подходит вам лучше всего.

 1
Author: Christoph, 2013-09-20 09:41:43

Для имитации цвета с непрозрачностью вам также понадобится цвет фона. Допустим, что 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 по цвету rgb(r,g,b) = rgb(255,0,0) (красный) на фоне rgb(R,G,B) = rgb(255,255,255) (белый). Это означает, что вам нужно суммировать 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
 0
Author: Kasyx, 2013-01-18 14:10:01