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

Creating photoshop layer blend effects in CSS

I need to provide this image with css. A layer must be placed on the image. I can’t get exactly the same appearance. Is there a solution to this? It can also be an SVG filter.

Intended result: enter image description here

I’ve tried it, but I can’t make it.

div {
  width: 400px;
  height: 800px;
  background-image: url("https://i.stack.imgur.com/z5W7Q.jpg");
  background-color: rgba(16, 24, 45, 0.8);
  background-size: contain;
  background-repeat: no-repeat;
  background-blend-mode: darken;
}
<div></div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I had solved this problem much later. I'd better add it here. Related answer.

    div {
  width: 400px;
  height: 400px;
  background-image: url("https://i.stack.imgur.com/z5W7Q.jpg");
  background-color: rgba(16, 24, 45, 0.8);
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: darken;
  position: relative;
}

div::before,
div::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

div::before {
  background-color: gray;
  mix-blend-mode: color;
}

div::after {
  mix-blend-mode: overlay;
  background-color: #98aeea;
}
    <div></div>


  2. 0

    Set the image on a pseudo-element (::before) under the div (z-index: -1), and use the grayscale filer to convert it to black & white.

    Set the semi-transparent background color (rgba(16, 24, 45, 0.8)) on the div.

    div {
  position: relative;
  width: 400px;
  height: 400px;
  background: rgba(16, 24, 45, 0.8);
}

div::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://i.stack.imgur.com/z5W7Q.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  filter: grayscale(1);
  z-index: -1;
  content: '';
}
    <div></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search