Мобильная версияЯ создаю макет страницы, похожий на кусочки головоломки, я хочу, чтобы изображение приняло форму одного из кусочков, есть ли какой-нибудь способ - или, может быть, свойство вроде фона-клип: текст, но для изображений - чтобы сделать это ? Вот изображение макета, я хочу, чтобы изображение поместило всю серую часть. Я попытался сделать изображение фоновым изображением, но мне не удалось заставить его работать.
вот соответствующий код: HTML :
Название проекта Lorem ipsum dolor сидеть amet consectetur adipisicing elit. Quas ab autem iusto repudiandae fugiat eaque, voluptatem alias repellat qui архитектурная скорбь - кроме ipsa animi предусмотрительный aliquam dolorem, expedita quaerat nemo debitis cupiditate? Excepturi optio molestias ea aperiam dignissimos neque?
CSS:
.projects-section { цвет фона: #0ac507; положение: относительное; z-индекс: 95; } .project-details-раздел { белый цвет; положение: относительное; z-индекс: 96; дисплей: сетка; столбцы-шаблона сетки: 50% 50%; } .project-info { дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; оправдание-содержание: центр; выравнивание текста: по центру; положение: относительное; z-индекс: 99; цвет фона: #ff5900; } .название проекта { размер шрифта: 3,5рем; } .project-абзац { выравнивание текста: по центру; заполнение: 0 8рем; маржа-верх: 4rem; } .project-фото { цвет фона: серый; } .circle--left-top { верх: 0; слева: 5%; трансформировать: транслировать(50%, -50%); } .circle--right-top { верх: 0; правильно: 5%; трансформировать: транслировать(-50%, -50%); } .circle--center-left { верх: 55%; слева: 100%; трансформировать: транслировать(-50%, -50%); }
