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

CSS is background-mode-blend not a thing yet? – Photoshop

I’ve been trying to get that property to work so I don’t have to resort to photoshop to utilize effects like screen and multiply and stuff. I see references to it everywhere, but I can’t seem to get it to work on a page I’m working on.

Maybe I’m implementing it wrong?

.nav-items {
display: inline-block;
font-family: Porter;
font-size: 2em;
letter-spacing: .05em;
margin: .3em;
padding: 5px;
background-color: #1e1e1e;
background-blend-mode: screen; }

of which nav-items is li’s in a particular ul. Background is just a solid gray block not using the screen blend mode. Any wisdom to be shed?

Tags:

2

Answers


  1. 0

    According to the documentation:

    Blending modes should be defined in the same order as the background-image CSS property

    But you are not specifying a background-image. background-blend-mode does not blend colors, it blends images.

    Login or Signup to reply.
  2. 0

    Blend modes can be used in 2 different attributes,

    • background-blend-mode
    • mix-blend-mode

    The first one sets the effect between 2 backgrounds in the same element (it can be an image and a solid color)

    The second one sets the effect between the element and the underlying elements (that seems to be your case). But note that it will affect all the element, (borders, text, and so on) – not only the background

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search