Новости

Как расположить картинку внутри силуэта

Как расположить картинку внутри силуэта

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

Как расположить картинку внутри силуэта

Работа с картинкой черепахи

Создадим контейнер и бокс, куда вставим картинку черепахи. Контейнер нужен для позиционирования бокса с картинкой в центре экрана. Заданные боксу ширина и высота ограничивают размеры вставляемых изображений.

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

Источник

Статьи по теме

Добавить комментарий

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button