Как применить z-index к моему тексту, чтобы поместить его поверх моего изображения - PullRequest
Новая
       14

Как применить z-index к моему тексту, чтобы поместить его поверх моего изображения

0 голосов
/ 22 марта 2019

Я пытаюсь разместить текст поверх изображения, и кажется, что текст не помещается поверх изображения.

Если бы у меня было изображение и текстовый блок внутри div. Какой CSS понадобится, чтобы текст работал так, как я планировал.

Вот мой код без CSS: 

<div class="row">
    <div class="text-area">
        <i class="icon ion-md-exit"></i>
        <h2>TEXT</h2>
        <p>TEXT</p>
    </div>

    <img class="bg-image" src="https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg">
</div>

Если бы вы могли выровнять текстовую область по вертикали, это было бы огромной помощью.

Спасибо!

1 Ответ

1 голос
/ 22 марта 2019

Если бы я делал это, я бы сделал это одним из двух способов.

Вы можете использовать изображение, чтобы объявить высоту элемента, а затем поместить текстовую область сверху так: 

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.row {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.text-area {
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;

    text-align: center;
}

.bg-image {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    display: block;
}

</style>

<div class="row">
    <div class="text-area">
        <i class="icon ion-md-exit"></i>
        <h2>TEXT</h2>
        <p>TEXT</p>
    </div>

    <img class="bg-image" src="https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg">
</div>

Или установите высоту поля и используйте фоновое изображение, например: 

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.row {
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    position: relative;

    background-image: url(https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.text-area {
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;

    text-align: center;
}

.bg-image {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    display: block;
}

</style>

<div class="row">
    <div class="text-area">
        <i class="icon ion-md-exit"></i>
        <h2>TEXT</h2>
        <p>TEXT</p>
    </div>
</div>
...