есть фон такой из личного блога Билла Гейтса там как видите 2 фотки они приняли цвет заднего фона оранжевый(на одном он с женой в другом какой то чертёж).Как добится такого результата вот уже 3 дня не могу найти ответ.Вот ссылка на сайт если кому понадобится
-
Это просто png с прозрачностью. Никаких примудростей– MedvedevDev5 апр 2017 в 21:02
Добавить комментарий
|
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>