Как расположить картинку внутри силуэта
У нас есть изображение яблока в виде черного силуэта и картинка плавающей черепашки. Как сделать так, чтобы края изображения с черепахой приняли форму яблока. Иными словами поместить черепаху внутри яблока.
Работа с картинкой черепахи
Создадим контейнер и бокс, куда вставим картинку черепахи. Контейнер нужен для позиционирования бокса с картинкой в центре экрана. Заданные боксу ширина и высота ограничивают размеры вставляемых изображений.
<div class="container">
<div class="imgBx">
<img src="turtle.jpg">
...
</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*{
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*не учитывать ширину рамок отступов*/
font-family: 'Poppins', sans-serif;/*название шрифта*/
}
body{
display: flex;/*подключить flexbox*/
justify-content: center;/*горизонтальное выравнивание*/
align-items: center;/*вертикальное выравнивание*/
min-height: 100vh;/*на всю высоту экрана*/
}
.container{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;/*перенос на новую строку разрешен*/
}
.imgBx{
position: relative;/*относительное позиционирование*/
width: 500px;/*ширина бокса*/
height: 500px;/*высота бокса*/
margin: 40px;/*отступы со всех сторон*/
}
Работа с картинкой яблоко
Вставляем в HTML разметку изображение яблока. Картинка с яблоком оказывается выше черепахи и полностью перекрывает его.
<div class="container">
<div class="imgBx">
<img src="turtle.jpg">
<img src="apple.jpg">
</div>
</div>
.imgBx img{
position: absolute;/*абсолютное позиционирование*/
top: 0;/*позиция сверху*/
left: 0;/*позиция слева*/
width: 100%;
height: 100%;
}
Теперь добавим два важных CSS-свойства. Свойство mix-blend-mode со значением screen кардинально меняет ситуацию — происходит смешивание слоев. Теперь нижний слой с черепахой оказывается наверху, а яблоко внизу. Свойство object-fit со значением cover обрезает края картинки с черепахой по форме яблока. В результате мы имеем интересный эффект, который можно взять себе на вооружение и применять в веб-дизайне.
.imgBx img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;/*как заполнять контейнер*/
mix-blend-mode: screen;/*режим смешивания слоев*/
}
Этот CSS-трюк не работает с форматом png.
