Как наложить текст на изображения flexbox внутри контейнера и сделать его отзывчивым - PullRequest
Новая
       23

Как наложить текст на изображения flexbox внутри контейнера и сделать его отзывчивым

0 голосов
/ 29 июня 2019

Ссылки на изображения внизу, например, как выглядит моя страница. 

        I have managed to align each image which are housed in 
            <div class="parent">
              <div class="teenager">

        I can't get the text(s) to sit on top each blue shape. 

        I tried using using z-index, setting each image box as relative and tried setting the text both as absolute and using z-index. But then it will stay static when the resolution is changed.

Это где каждое изображение находится внутри

Пока что мне нравится сам текст в

Я подросток

и

Я родитель / опекун

На рисунке 1 показано, как страница выглядит с разрешением 1000px, все реагирует, но не текст, так как я не смог получить правильную комбинацию с использованием flexbox, grid, относительного и абсолютного с z-index или Bootstrap. https://ibb.co/RQYcJ8m

Изображение два - мобильный размер. снова фоновые изображения и формы синего цвета являются адаптивными, но текст не будет сидеть на формах синего цвета без использования относительного. https://ibb.co/0Gr59sM

Мне бы хотелось, чтобы текст отображался перед синими фигурами, а не фиксировался на месте, чтобы он мог быть отзывчивым

Также применяется контейнер-жидкость Bootstrap 4 без наполнителей и полей.

Я пытался понять это уже несколько дней!

Ответы [ 2 ]

1 голос
/ 29 июня 2019

Вы бы хотели, чтобы ваши отношения между родителями и детьми были: 

<div class="blue-circle">
    <h2 class="hero__subtitle">I am a parent/carer</h2>
</div>

<div class="blue-circle">
    <h2 class="hero__subtitle">I am a teenager</h2>
</div>

, где каждый .hero__subtitle имеет position: absolute, а каждый .blue-circle имеет position: relative.

. Вы можетезатем используйте Flexbox для выравнивания по вертикали и горизонтали каждого .hero__subtitle.Вам также нужно будет удалить поля и отступы на вашем <h2>, если вы этого еще не сделали. 

.hero {
    /* space-around is used to provide equal spacing between and around
       the circles. align-items is used to center the circles vertically. */
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 500px;
    background: url(https://unsplash.it/1000);
}


/* The position is set to relative in order to keep the absolute
   positioning of the h2 in relation to the circle.
   
   I used Flexbox again to ensure the hero subtitles are vertically
   and horizontally aligned. */
.blue-circle {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: lightblue;
    opacity: 0.5;
    width: 250px;
    height: 250px;
    border-radius: 100%;
}

/* The subtitle has a position of absolute in relation to the blue circle. 
   Margin and padding are removed to prevent any misalignments. */
.hero__subtitle {
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
}
<div class="hero">
    <div class="blue-circle">
        <h2 class="hero__subtitle">I am a parent/giver</h2>
    </div>

    <div class="blue-circle">
        <h2 class="hero__subtitle">I am a teenager</div>
    </div>
</div>
0 голосов
/ 01 июля 2019

Flexbox должен сделать трюк: 

html, body, .container{
    height: 100%;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    background: orangered;
    min-height: 350px;
}

.circle{
    background-color: dodgerblue;
    opacity: 0.8;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.circle:first-child{
    margin-right: 40px;
}
<div class="container">
    <div class="circle">
        <h2>I am a parent/care giver</h2>
    </div>

    <div class="circle">
        <h2>I am a teenager</h2>
    </div>
</div>
...