Photoshop Question posted in
The official user guide can be found here.

Can't convert Photoshop opacity to CSS3

My PSD contains something like this:

enter image description here

As you can see this is a simple background with a text block (color: #ffffff). I’ve applied a 3% opacity on the text layer like this:

enter image description here

When I try to reproduce this in CSS, the text color is far more darker in the browser and I don’t understand why:

enter image description here

Here is the CSS

.a-text {
  color:       rgba(255, 255, 255, 0.03);
  font-size:   200px;
  font-family: "Lato Black";
}

This is not a color profile issue or something. As you can see the background color is exactly the same. And this is not a CSS rule conflict. There is something wrong with the transparency that I’ve maybe misunderstood.

Thanks for your help 🙂

Tags:

2

Answers


  1. 0

    Your code looks correct and I don’t think you’ve misunderstood anything. Its going to be hard to reproduce fonts and effects/styles placed on the fonts completely perfectly when moving from a graphics tool to code. What you have is a bit close you may just want to bump up the opacity a bit. If you need your graphics to be perfect regarding opacity shades etc I recommend using SVG.

    Login or Signup to reply.
  2. 0

    You might try the CSS opacity feature, which in theory should result in the same result as a rgba value — but who knows. I suspect that results vary from browser to OS. Can’t test here. I would also opt bumping.

    .a-text {
    color:       white;
    opacity:     .03;
    font-size:   200px;
    font-family: "Lato Black";
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search