Запазване на същия цвят при слагане на opacity.


3
Здравейте колеги,
въпросът ми е как да запазя един цвят слагайки му opacity.
Примерно имам rgb цвета : rgb(17, 92, 130). Каква е формулата за промяна на трите цвята така че ако сложа opacity примерно 0.4 крайният цвят да остане същият ?
Видях в google, че това може да стане като имам началния и крайния цвят обаче ще ми трябва javascript за да го направя по този начин. Има ли начин това да стане само със css ?
P.S Мисля, че това ще е доста полезно за всички, той като е доста вероятно да ни дадат някакъв цвят с opacity на изпита, както е на 1-ва задача от примерния изпит.

в HTML/CSS от tddhome (3086 точки)


Отговори



2

Здравей! Формулата която търсиш е следната:

newColor = [outColor - (1 - opacity) * backColor ] / opacity,

където newColor е търсеният цвят с прозрачност opacity, outColor е цветът който виждаш, а backColor е фонът зад търсеният от нас цвят.  В задача 1 backColor аз го виждам като rgb(23, 64, 85). Така при цвят rgb(17, 92, 130) за трите търсени цвята ще получим:

R = [outR - (1 - opacity) * backR] / opacity
G = [outG - (1 - opacity) * backG] / opacity
B = [outB - (1 - opacity) * backB] / opacity

R = [17 - (1 - 0.4) * 23] / 0.4 = 8
G = [92 - (1 - 0.4) * 64] / 0.4 = 134
B = [130 - (1 - 0.4) * 85] / 0.4 = 198

което е търсеното: rgba(8, 134, 198, 0.4).


от Flystar (1171 точки)


0
Това и аз го прочетох, но ми се искаше някакъв начин, който да може да се напише директно в css :) Мерси все пак :)

от tddhome (3086 точки)

0
Директно в CSS незнам, но в LESS става, а той си генерира CSS. Няма да го смяташ, но все пак най-малкото ще трябва да въведеш входните цветове и желаната прозрачност:
.opacityColor(@BackR, @BackG, @BackB, @R, @G, @B, @opacity) { background: rgba((@R - (1 - @opacity) * @BackR) / @opacity, (@G - (1 - @opacity) * @BackG) / @opacity, (@B - (1 - @opacity) * @BackB) / @opacity , @opacity); }
Използване: .opacityColor(23, 64, 85, 17, 92, 130, 0.4);

от Flystar (1171 точки)


1
Здрасти колега :)
Мисля че вместо opacity е по добре да използваш rgba, тъй като чрез opacity даваш прозрачност на всичко, което е съдържание в това което искаш да направиш прозрачно (букви примерно). Иначе той цвета си се запазва просто става с една идея по различен.

от zorica (212 точки)


0
Използвам точно rgba. И точно тази промяна в цвета искам да избегна. Все пак на изпита се иска pixel perfect. Пък и разликата не е чак толкова малка.

от tddhome (3086 точки)

0
Еми аз не съм имала проблеми с това, то си е дадено в картинката какъв точно цвят се използва и колко му е прозрачността, ако всичко правиш както е на картинката не би трябвало да има проблем. Зависи и от цвета, който имаш отзад, примерно ако стилизираш фон на div с прозрачност .. и цвета на body-то. Но ако всичко си го спазваш от картинката не би трябвало да има проблем .. знам ли

от zorica (212 точки)