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!

  • 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 Mar 17 '12 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 Mar 17 '12 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 Mar 19 '12 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 Mar 19 '12 at 17:24
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.

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...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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