Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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!

share|improve this question

migrated from stackoverflow.com Mar 17 '12 at 19:39

This question came from our site for professional and enthusiast programmers.

    
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
add comment

2 Answers 2

up vote 3 down vote accepted

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.

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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