Dodaj kanał alfa do danego koloru

Question

Mam kilka obok siebie, które chcę stylizować za pomocą CSS. Chcę zastosować szeroką gamę kolorów tła, ale chcę dolna być taki sam kolor przy zmniejszonym kryciem, więc myślałem o tym:

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

Więc chcę zmienić krycie już zdefiniowane tło bez wpływu na krycie tekstu za pomocą CSS3.

Czy to możliwe?

Answer 1

Uważam, że nie ma sposobu, aby to zrobić.

Css jest bardzo ograniczone samo w sobie i niewiele można z nim zrobić.

Jedynym sposobem można dodać krycie jest:

opacity: 0.5 

Ale powyżej będzie również wpływać na samym tekście, nie tylko tło.

Można go jednak zawinąć w taki sposób, aby oddzielić bloki tła od tekstu, dzięki czemu kolor tekstu pozostał nietknięty.

EDIT: Zobacz skrzypce: http://jsfiddle.net/YfSn7/30/

Ale to może wyglądać nieco śmiesznie, więc nie będę dużo rada go używać.

Zgadnij, że musiałbyś zaakceptować, że jest to niemożliwe, jeśli naprawdę chcesz uprościć rzeczy, zamiast je nadmiernie komplikować.

Answer 2

Nie ma sposobu, aby to zrobić, nadmierne powtarzanie wartości jest jednym z błędów CSS.

Jeśli twój standardowy kolor to rgba(0,0,0,1);, potrzebujesz rgba(0,0,0,0.5); jako przezroczystą wersję.

Być może mógłbyś zrobić coś takiego po stronie klienta z odrobiną javascript, ale to nie jest dokładnie czyste.

Answer 3

Można to zrobić przy użyciu JavaScript w następujący sposób:

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

}