Multiply для img (наложение изображения с белым фоном на серый фон)

#css #css3

Итак, часто существует необходимость наложения изображений, например, товарных позиций,
на серый фон. При этом мы имеем белый фон, что часто не вяжется с дизайном страницы.
Картинка для понимания вопроса:



Существуют ли вообще способы наложения  на серый фон по аналогии с background-blend-mode:
multiply?

Кусочек HTML с внешним видом, чтоб не было попыток просто продублировать то, что
на картинке выше:



body {
margin: 0;
padding: 0;
background: #f6f6f6;
text-align: center;
}
img {
max-width: 240px;
margin: 60px;
}




    

Ответы

Ответ 1

На текущий момент, самым простым и банальным способом решения вопроса стало перекрытие
изображения прозрачным фоном:



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;
}






В этом случае, поигравшись со значениями, я полностью достигнул нужного результата,
без потери контраста и сложных "костылей". Сфера применения может быть самой разнообразной.
Если никто не придумает что-то лучше, буду рад принять как правильный ответ.


Ответ 2

Есть, это свойство 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;
}

  



Ответ 3

Можно сделать что-то типа такого:



.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;
}

  

    
  
  



Ответ 4

средствами css вы не измените отдельных частей растровой картинки(см. белый фон),
в вашем случае подходит только использование png.



.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);
}