I have two divs, in the first there is a photo with background-color: blue; in the second there is a mix-blend-mode: multiply style; The second div is position relative and covers 20% of the photo.

How to make the second DIV constantly responsive? Because when you change the screen size, 2 Div loses its shape and becomes wider than the picture.

    1 answer 1

    For the first time I learned from you about mix-blend-mode) At random I tried to do something, it turned out like this:

    DEMO

    <div class="bu-1"></div> <div class="bu-2"><img class="mix" src="..."></div>

    CSS:

    The main picture, which should be on the left in a blue diva, placed as a background, through background-image:

     .bu-1 {background-color: #045acf; width: 100%; height: 200px; position: absolute; text-align: center; background-image: url('ссылка.png'); background-repeat: no-repeat; background-size: 100% 200px; }

    So that the picture in case of anything, did not repeat and was one - background-repeat: no-repeat; , and to take the width and height of the diva - background-size: 100% 200px; so that in case of anything, it is always centered - text-align: center; , although there is not necessarily.

    And the second div through float: right sent to the right:

     .bu-2 {width: 20%; height: 200px; float: right; text-align: center; position: relative; border: 2px solid red; }

    And set the width to 20%, so that it always covers only 20% of the main div. Well, the picture inside the 20 percent diva:

     .mix {mix-blend-mode: multiply; width: 100%;}