3

I have a content box in photoshop with the background color #bc0018 with a 65% opacity and 50% fill.

I am able to translate the backgroundcolor and opacity part to this, but without the 50% fill the backgroundcolor looks different.

.content-box {
    background-color: rgba(188, 0, 24, 0.65); }

Any suggestions on also getting the proper "fill" in CSS?

EDIT

I did just divide the opacity by half and it appears to achieve the same effect as a 50% fill. Still, I would love to hear how other people do this? I definitely don't want to create an image just for this.

.content-box {
    background-color: rgba(188, 0, 24, 0.325); }

Thanks!

Improve this question
4
  • I think what you want to do is set the opacity to 100% on your color in Photoshop. Screencapture and grab that actual color from the screencapture. You can then apply the color to your div and set the opacity to 65% and get the same color. Just a theory, anyways. Let me know if it helps!
    – Elliot Bonneville
    Commented Mar 17, 2012 at 19:33
  • What is the 50% against in photoshop? Simply transparent or transparent over a white background? #bc0018 at 50% over white translates to #dd7f8b. Over black it translates to #5e000c. Don't get me wrong I like RGBa values and their use, but if you can avoid them it's sometimes better for compatibility sake.
    – Scott
    Commented Mar 17, 2012 at 20:48
  • The problem I ran into using a simple hex value was that the text became transparent too. I used rbga as suggested in stackoverflow.com/questions/806000/… and css3.info/opacity_rgba_and_compromise
    – Abe
    Commented Mar 19, 2012 at 17:16
  • 1
    Ahh yeah, CSS opacity effects all children as well. That makes more sense. If you actually want transparency in the web page, then RGBa is the best bet for a background color provided you're okay with lack of support in older browsers.
    – Scott
    Commented Mar 19, 2012 at 17:24

2 Answers 2

Reset to default
4

Multiply the opacity and fill opacity fractions, and you get the final opacity value. In your case this would be 0.65*0.5 = 0.325. So you're right that halving the opacity in this case works.

However, there are certain pitfalls that make a straightforward conversion from photoshop to CSS difficult. Fill opacity in PS will not affect drop shadows and such, but CSS opacity will also affect any analogous box-shadows you apply.

Improve this answer
0

rgba seems to be nothing more than regular rgb values

{ background-color:rgba(154,201,40,0.5); }

with the additional alpha/opacity value

{ background-color:rgba(154,201,40,0.5); }

So just paste the full opacity color values in the first three boxes (rgb), and set opacity for it in the last value e.g. 0.5 is 50% transparency...

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.