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

HTML/CSS Image and Color Blending – Photoshop

Trying to “translate” photoshop design into HTML/CSS code and got stuck with color/image blending problem.

In Photoshop design I have layers as following:

  • Image (20% opacity)
  • Background color (100% opacity)

This translates into something like this:

enter image description here

Now in theory I could swap the order or the layers (image 100% opacity and background color 80%) but overall result would look different:

enter image description here

Here is how I have to wrap them:

<footer>
background image is visible here
<div>color overlay visible here</div>
</footer>

Exporting merge background is not an option.

Any suggestions?

Tags:

2

Answers


  1. 0

    Because you want the overlay to be on top of the background, you need to give it a z-index.

    HTML:

    <footer>
background image is visible here
<div class="overlay">color overlay visible here</div>
</footer>

    CSS:

    .overlay{
     position: relative;
     z-index: 1;
 }
    Login or Signup to reply.
  2. 0

    you could give a try to mix-blend-mode

    div {
  background: url(http://i.stack.imgur.com/wVaPl.png);
  padding-top: 5em;
}
p {
  background: #4770AC;
  mix-blend-mode: multiply;
  color: white;
  padding: 1em;
  font-size:2em;
}
    <div>
  <p>some text</p>
</div>

    gradients bg would do too 

    div {
  background: url(http://i.stack.imgur.com/wVaPl.png);
  padding-top: 5em;
}
p {
  background: linear-gradient(to bottom,#4770AC, tomato);
  mix-blend-mode: multiply;
  color: white;
  padding: 1em;
  font-size:2em;
}
    div {
  background: url(http://i.stack.imgur.com/wVaPl.png);
  padding-top: 5em;
}
p {
  background: #4770AC;
  mix-blend-mode: multiply;
  color: white;
  padding: 1em;
  font-size:2em;
}

<div>
  <p>some text</p>
</div>

    rgba() (or hsla()) colors could be a fallback

    div {
  background: url(http://i.stack.imgur.com/wVaPl.png);
  padding-top: 5em;
}
p {
  background: rgba(0, 40, 100,0.8);
  color: white;
  padding: 1em;
  font-size:2em;
}
    <div>
  <p>some text</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search