Добавить альфа-канал в заданный цвет

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

span.foo{
    background-color: rgba(0,0,0,1); /*or whatever*/
    color:white;
}

span.foo:last-child{
    background-color: rgba(*,*,*,0.5); /*just an example*/
}

Поэтому я хочу изменить непрозрачность уже определенного фона, не затрагивая непрозрачность текста, просто используя CSS3.

Возможно ли это?

Ответ 1

Я считаю, что нет никакого способа сделать это.

Css очень ограничен сам по себе, и с ним мало что можно сделать.

Единственный способ добавить непрозрачность:

opacity: 0.5

Но выше сказанное также повлияло бы на сам текст, а не только на задний план.

Тем не менее, вы можете обернуть его таким образом, чтобы отделить фоновые блоки от текста, чтобы сохранить цвет текста нетронутым.

РЕДАКТИРОВАТЬ: Смотрите скрипту: http://jsfiddle.net/YfSn7/30/

Но это может показаться несколько смешным, поэтому я бы не советовал его использовать.

Угадайте, что вам придется признать, что это невозможно, если вы действительно хотите сделать вещи проще, а не слишком усложнять их.

Ответ 2

Это можно сделать с помощью JavaScript следующим образом:

adjustHexOpacity (color, opacity) {
  const r = parseInt(color.slice(1, 3), 16);
  const g = parseInt(color.slice(3, 5), 16);
  const b = parseInt(color.slice(5, 7), 16);

  return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity + ')';

}

Ответ 3

Нет никакого способа сделать это, чрезмерное повторение значений является одним из недостатков CSS.

Итак, если ваш стандартный цвет rgba(0,0,0,1);, тогда вам понадобится rgba(0,0,0,0.5); в качестве прозрачной версии.

Возможно, вы можете сделать что-то вроде этой клиентской стороны с небольшим количеством javascript, но это не совсем чистое.

Ответ 4

Если у вас есть Sass:

background-color: rgba(white, 0.5);

Ответ 5

Если вы хотите использовать современный CSS:

--color_rgb: 0, 0, 0;
background-color: rgba(var(--color_rgb), 0.5));

Но по-прежнему невозможно добавить альфу к данному цвету, как в "какой-то другой таблице стилей применен этот цвет в RGB, Hex или что-то еще".

Ответ 6

Вы можете использовать переменные CSS:

span.foo {
    --background-color: 0, 0, 0;
    background-color: rgba(var(--background-color), 1);
    color: white;
}

span.foo:last-child {
    background-color: rgba(var(--background-color), 0.5);
}