So, there is often a need to overlay images, for example, items, on a gray background. At the same time we have a white background that often does not fit with the design of the page. Picture to understand the issue:

enter image description here

Are there any ways to overlay <img> on a gray background by analogy with background-blend-mode: multiply ?

A piece of HTML with a look so that there are no attempts to simply duplicate what is in the picture above:

 body { margin: 0; padding: 0; background: #f6f6f6; text-align: center; } img { max-width: 240px; margin: 60px; } 
 <img src="https://i.stack.imgur.com/iunPY.jpg" />

  • if there is no method for img try using js ... Set the background some element using src from img , and there already blend-mode But it is best to use png - Asan Abildin

4 answers 4

At the moment, the simplest and banal way to resolve the issue is to overlap the image with a transparent background:

 body { margin: 0; padding: 0; background: #f6f6f6; text-align: center; } img { max-width: 240px; margin: 60px; } div { position: absolute; width: 120px; height: 240px; background: rgba(30, 30, 30, .04); left: 50%; top: 60px; } 
 <img src="https://i.stack.imgur.com/iunPY.jpg" /> <div></div>

In this case, having played with the values, I fully achieved the desired result, without losing the contrast and difficult “crutches”. The scope of application can be very diverse. If no one comes up with something better, I will be happy to accept as the correct answer.

  • Thought sound and in many cases can ride. However, when implementing a gradient in the background or a darker background, there will still be problems. However, choosing between mix-blend-mode and this option, I still tend to yours. - Alexey Giryayev February

Yes, this property is mix-blend-mode: multiply .

 figure { margin: 0; padding: 0; position: relative; } figure img { mix-blend-mode: multiply; display: block; } figure:before { position: absolute; content: ' '; right: 0; width: 50%; height: 100%; background: #CCC; z-index: -1; } 
 <figure> <img src="https://media.istockphoto.com/photos/handsome-young-man-on-white-background-picture-id523478288?k=6&m=523478288&s=612x612&w=0&h=4JptiegzwJp1nA1ItdZSogOmqVqC02ZCFTCI32VrDDY=" /> </figure>

  • Support of course is not happy, and so a good option. - Alexey Giryayev February
  • @AlexeyGiryayev does not have to use one option. Do not forget about graceful degradation for those browsers that do not support this property, use @supports . - Sasha Omelchenko
  • Thank. In general, it is possible to combine both options for all occasions. - Alexey Giryayev

You can do something like this:

 .image { position: relative; display: inline-block; } .image> div { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; overflow: hidden; background: gray; /*Задать фон для png, отличный от основного*/ } .image-slider img { display: block; } 
 <div class="image"> <div> <img src="https://vignette.wikia.nocookie.net/chelovechestorona/images/b/b9/Bill_cipher_cat_by_ink_n_heart-d7mx1b5.png/revision/latest/scale-to-width-down/640?cb=20141006131434&path-prefix=ru" alt="" /> </div> <img src="https://vignette.wikia.nocookie.net/bakugan/images/2/2e/Aquos_Olifus.png/revision/latest?cb=20110223133315" alt="" /> </div>

  • You did not understand the question a little. The point is not to create a separation of the image, but to not use .png overlay the image on a gray background and at the same time turn the white areas of the overlay image into gray (background color). - Alexey Giryayev February

using css, you do not change individual parts of the raster image (see white background), in your case only png is suitable.

 .card{ width:200px; height:200px; background: url(https://www.be-in.ru/media/beingallery/gallary/things/2014/03/12/DSC_6803.png.590x700_q95.png) no-repeat center/100px auto, linear-gradient(90deg,white 50%,gray 50%); border:1px solid; position:relative; } .card:before{ content:''; display:block; position:absolute; top:0; left:calc(50% - 1px); height:100%; border-right:2px solid rgba(0,0,0,.3); } 
 <div class="card"></div>