Размещение изображения, текста и ссылки внутри элемента сетки CSS с помощью flex ⇐ CSS

[Anonymous]

Я создаю макет html/css, который должен выглядеть следующим образом:
(https://i.sstatic.net/Z49ekM8m.png)Каждое поле представляет собой ссылку. Чтобы расширить область активной ссылки на весь блок и обеспечить позиционирование текста внизу каждого элемента сетки, я установил каждую ссылку как флексбокс. Итак, в настоящее время у меня есть макет сетки с гибким блоком внутри каждого элемента сетки, если это имеет смысл.
На данный момент мне удавалось это сделать:
(https://i.sstatic.net/itbwRXvj.png)
Однако, когда я пытаюсь поместить изображение в поле «Обучение под руководством инструктора», я запускаю во всевозможные проблемы. Как я могу добавить свое изображение, не нарушая остальную часть моего дизайна?
Я попробовал поместить изображение в элемент div гибкого поля, и все это просто взорвалось.< /p>
Это «рабочий» код до того, как я попытался добавить свое изображение:

< div class="snippet-code">
.vtx_gc_001 {
display: grid;
height: 450px;
/*padding: 10px;*/
gap: 30px;
background-color: #f1f1f1;
}

.vtx_gi {
border-radius: 50px;
display: flex;
width: 100%;
height: 100%;
}

#vtxgi1 {
grid-column: 1 / span 2;
background-color: #00943c;
}

#vtxgi2 {
grid-row: 2 / 4;
background-color: #008299;
border-radius: 0px;
border-bottom-right-radius: 50px;
}

#vtxgi3 {
grid-column: 2;
grid-row: 2;
background-color: #BEC1C3;
}

#vtxgi4 {
grid-column: 2;
grid-row: 3;
background-color: #00609C;
}

#vtxgi5 {
grid-column: 1 /span 2;
grid-row: 4;
background-color: #F3CF40;
}

#vtx_a1,
#vtx_a2,
#vtx_a3,
#vtx_a4,
#vtx_a5 {
display: flex;
align-self: last baseline;
}

.vtx_grid_a {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-end;
}

Exchange 2024
Instructor Led Training
Course Catalog
Partner Resources
Get Certified!




Последующие действияМне удалось реализовать изображение, которое я пытался добавить на свою страницу по этому вопросу. В настоящее время страница выглядит так.
введите здесь описание изображения
Я хочу добавить еще одно изображение — на этот раз в поле «Пройти сертификацию» на внизу, чтобы мой финал выглядел примерно так, хотя я хочу применить эффект радиуса границы, который вы видите на других полях в верхнем и нижнем левом углу этого изображения.
введите здесь описание изображения
Я пытался использовать решение, которое получил из предыдущего поста, но в итоге получил вот это.
введите здесь описание изображения
Я думаю, что проблема с изображением связана с заполнением, которое я установил для ссылки в этом div. Я также не знаю, как расположить текст в правой части элемента div.
Потрясающий шрифт, который вы видите на первых двух изображениях, появился потому, что я удалил это изображение из своего CMS, но они не отображаются, когда я открываю страницу локально.
Вот мой код. У меня странное сочетание встроенного и внешнего CSS — это также обусловлено ограничениями в CMS, где мне в конечном итоге приходится развертывать страницу, поэтому я ничего не могу с этим поделать.

.vtx_gc_001 {
display: grid;
height: 450px;
/*padding: 10px;*/
gap:30px;
background-color: #ffffff;

}
.vtx_gi {
border-radius: 50px;
display: flex;
width: 100%;
height: 100%;
/*justify-content: center;*/
/*align-items: center;*/
/*align-items: center;*/
/*justify-content: center;*/
/*padding: 20px;*/
/*font-size: 30px;*/
/*text-align: center;*/
}

#vtxgi1 {
grid-column: 1 / span 2;
background-color: #00943c;
}

#vtxgi2 {

grid-row: 2 / 4;
background-color: #008299;
/*border-radius: 0px;
border-bottom-right-radius: 50px;*/

}

#vtxgi3 {
grid-column: 2;
grid-row: 2;
background-color: #BEC1C3;
}

#vtxgi4{
grid-column: 2;
grid-row: 3;
background-color: #00609C;

}

#vtxgi5 {
grid-column: 1 /span 2;
grid-row: 4;
background-color: #F3CF40;

}

#vtx_a1,
#vtx_a2,
#vtx_a3,
#vtx_a4,
#vtx_a5

{
display: flex;
align-self: last baseline;

}

.vtx_grid_a {

width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-end;

}

.vtx_gi {
position: relative;
overflow: hidden;
}

.vtx_gi .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
right: 0;
height: 70%;
}

.vtx.gi .image2 {
position: absolute;
top: 0;
left: 0;
width: 30%;
bottom: 0;
right: 0;
height: 100%;

}



Exchange 2024 
Instructor Led Training 
Course Catalog 
Partner Resources 
Get Certified! 




Подробнее здесь: https://stackoverflow.com/questions/790 ... using-flex