skip to Main Content

I’m trying to achieve the same view I have in Photoshop / Avocode with CSS.
But doesn’t matter how I overlap the backgrounds and which opacity levels I set – I can’t achieve the same level of transparency and saturation.

Is it possible with CSS?

enter image description here

.parent {
height:300px;
width: 650px;
display:flex;
}

.child {
position:relative;
flex:1;
background-image: url(https://images.unsplash.com/photo-1611149956655-0dd788bb763c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
background-position: center;
width:50%;
height:100%;
}
.child::after {
content:'';
position:absolute;
width: 100%;
height: 100%;
/*background-color: rgba(102, 207, 235,.7);*/
background-color: rgba(34,186,226, .7);

}
.child1 {
flex:1;
background-image: url(https://i.imgur.com/t2IIhj1.png);
background-position: center;
width:50%;
height:100%;
}
<div class="parent">
<div class="child"></div>
<div class="child1"></div>
</div>

3

Answers


  1. Not sure if this fits your needs but can be a way to achieve that.

    .parent {
      position: relative;
      height: 300px;
      width: 200px;
      background-image: url(https://images.unsplash.com/photo-1611149956655-0dd788bb763c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
      background-position: center;
    }
    
    .parent::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgb(102, 207, 235);
      opacity: .7;
    }
    <div class="parent" />
    Login or Signup to reply.
  2. you can do it with linear-gradient, placing it in front of an image in background-image. here is the solution:

    .parent {
        height:300px;
        width: 200px;
        }
        
        .child {
        background-image: linear-gradient(rgba(102, 207, 235,0.5), rgba(102, 207, 235,0.5)), url(https://images.unsplash.com/photo-1611149956655-0dd788bb763c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); 
        opacity:1;
        /*
        filter: saturate(2);
        */
        background-position: center;
        width:100%;
        height:100%;
        }
    <div class="parent">
    <div class="child"></div>
    </div>
    Login or Signup to reply.
  3. Adding a mix-blend-mode can probably help you getting closer:

    .parent {
      height: 300px;
      width: 650px;
      display: flex;
    }
    
    .child {
      position: relative;
      flex: 1;
      background-image: url(https://images.unsplash.com/photo-1611149956655-0dd788bb763c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80);
      background-position: center;
      width: 50%;
      height: 100%;
    }
    
    .child::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(34, 186, 226, .7);
        mix-blend-mode: hard-light;
    }
    
    .child1 {
      flex: 1;
      background-image: url(https://i.imgur.com/t2IIhj1.png);
      background-position: center;
      width: 50%;
      height: 100%;
    }
    <div class="parent">
      <div class="child"></div>
      <div class="child1"></div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search