Agregar canal alfa a un color determinado

Question

Tengo un par de uno al lado del otro que quiero estilo con CSS. Quiero aplicar una amplia variedad de colores para el fondo, pero quiero que el inferior que es el mismo color con la opacidad reducida, por lo que pensé en esto:

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*/ 
} 

así que quiero cambiar la opacidad de la fondo ya definido sin afectar la opacidad del texto simplemente usando CSS3.

¿Esto es posible?

Answer 1

Creo que no hay forma de hacerlo.

Css es muy limitado por sí mismo, y no hay mucho que pueda hacer con él.

La única forma en que podría añadir opacidad es:

opacity: 0.5 

Pero lo anterior también afectaría el texto en sí, no sólo de fondo.

Sin embargo, podría envolverlo de manera que se separen los bloques de fondo del texto, para que no se altere el color del texto.

EDIT: Ver el violín: http://jsfiddle.net/YfSn7/30/

Pero eso puede parecer algo ridículo, así que no lo haría mucho más consejos de usarlo.

Supongo que tendrías que aceptar que esto es imposible, si realmente quieres simplificar las cosas en lugar de complicarlas en exceso.

Answer 2

No hay ninguna manera de hacerlo, la repetición excesiva de valores es uno de los defectos de CSS.

Por lo tanto, si su color estándar es rgba(0,0,0,1);, necesitará rgba(0,0,0,0.5); como versión transparente.

Quizás podría hacer algo como este lado del cliente con un poco de javascript, pero eso no es exactamente limpio.

Answer 3

Se puede hacer uso de JavaScript de la siguiente manera:

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 + ')'; 

}