как сделать чтобы картинка взял цвет заднего фона

358
07 апреля 2017, 21:09

есть фон такой из личного блога Билла Гейтса там как видите 2 фотки они приняли цвет заднего фона оранжевый(на одном он с женой в другом какой то чертёж).Как добится такого результата вот уже 3 дня не могу найти ответ.Вот ссылка на сайт если кому понадобится

https://www.gatesnotes.com/globalpages/bio

Answer 1

Всё же банально просто. Фото с прозрачным фоном является background-image элемента div, который, в свою очередь, является дочерним по отношению к другому div с background-color

#test { 
  background-color: #fdbd12; 
  height: 527px; 
} 
 
#bill { 
  background-image: url(https://www.gatesnotes.com/tgn/bio/img/sprite.png); 
  background-position: -303px 0; 
  width: 433px; 
  height: 531px; 
  position: absolute; 
  left: 171px; 
  top: 10px; 
}
<div id="test"> 
  <div id="bill"></div> 
</div>

Оно же, но без фона

#test { 
  /*background-color: #fdbd12;*/ 
  height: 527px; 
} 
 
#bill { 
  background-image: url(https://www.gatesnotes.com/tgn/bio/img/sprite.png); 
  background-position: -303px 0; 
  width: 433px; 
  height: 531px; 
  position: absolute; 
  left: 171px; 
  top: 10px; 
}
<div id="test"> 
  <div id="bill"></div> 
</div>