CSS - я хочу показывать изображения под текстом

У меня есть некоторые проблемы с отображением изображения. У контейнера есть фоновое изображение, а для position установлено значение relative. В контейнере есть текст. Я хочу показать изображение, для которого position установлено значение absolute. Но проблема в том, что если изображение имеет положительный z-индекс, то оно перекрывает текст. Если изображение имеет отрицательный z-индекс, то оно находится под фоновым изображением контейнера, и я не могу видеть изображение.

Я новичок в html и css. Так кто-нибудь знает, может мне помочь? Прошу прощения за мой плохой английский.

.banner {
        background: url(../img/Banner-back.png) center center no-repeat;
        background-size: cover;
        text-align: center;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans JP;
        position: relative;
    }
    .banner-content {
        z-index: 1
    }
    .creative {
        position: absolute;
        z-index: 0;
    }
    .text-shadow {
        text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
    .text-shadow01 {
        text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white, 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
    .text-shadow02 {
        text-shadow: -3px 0 10px white, 0 3px 10px white, 3px 0 10px white, 0 -3px 10px white, 0 0 10px white;
    }
    .underline-text {
        background: url(../img/underline.png) no-repeat;
        background-size: 100% 20px;
        background-position: bottom;
        padding: 0.25rem;
    }
    .title01 {
        font-size: 4.5rem;
    }
    .title02 {
        font-size: 2.8rem;
    }
    .banner-content {
        margin-left: 25vw;
        text-align: left;
    }
    .creative {
        width: 43%;
        top: 6vw;
        right: 40vw;
    }

<div class = "banner">
  <div class = "bg-green d-flex align-items-center justify-center">
    <div class = "banner-left"></div>
    <div class = "text-shadow text-white h1 p-3 mb-5">This is my header.</div>
    <div class = "banner-right"></div>
  </div>
  <div class = "banner-content">
    <div><img src = "assets/img/Banner01.png"></div>
    <div class = "h1 mt-4">Promise</div>
    <div class = "title01 text-green text-shadow01">Hiquality</div>
    <div class = "title01 text-green text-shadow01">Sample text</div>
    <div class = "title02 text-shadow02">Sample text</div>
    <div class = "title02 text-shadow02" style = "z-index: 1000">Sample text</div>
  </div>
  <div class = "scroll-div">
    <img class = "scroll-bar" src = "assets/img/Scroll-bar.png">
  </div>
  <div class = "creative"><img src = "assets/img/creative-team.png"></div>
</div>

пожалуйста, поделитесь своим кодом вместе с вопросом.

— 24.12.2020 13:42

Я не знаю, как поделиться своим кодом, поэтому я отредактирую свой вопрос.

— 24.12.2020 13:43

Отредактируйте тот же вопрос, который вы ввели здесь, и нажмите команду Ctrl + K и вставьте код, который у вас есть.

— 24.12.2020 13:48

html css image z-index

24.12.2020 13:18

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

123

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type = "text/css">
        
.banner {
    background: url(../img/Banner-back.png) center center no-repeat;
    background-size: cover;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-family: Source Han Sans JP;
    position: relative;
}
.banner-content {
    z-index: 1
}
.creative {
    position: absolute;
    z-index: 0;
}
.text-shadow {
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.text-shadow01 {
    text-shadow: -3px 0 white, 0 3px white, 3px 0 white, 0 -3px white, 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.text-shadow02 {
    text-shadow: -3px 0 10px white, 0 3px 10px white, 3px 0 10px white, 0 -3px 10px white, 0 0 10px white;
}
.underline-text {
    background: url(../img/underline.png) no-repeat;
    background-size: 100% 20px;
    background-position: bottom;
    padding: 0.25rem;
}
.title01 {
    font-size: 4.5rem;
}
.title02 {
    font-size: 2.8rem;
}
.banner-content {
    margin-left: 25vw;
    text-align: left;
}
.creative {
    width: 43%;
    top: 6vw;
    right: 40vw;
}

.title03 {
    padding: 263px !important;
}

.title01 {
    font-size: 4.5rem;
    position: absolute;
    overflow: hidden;
    z-index: 9999;
    padding: 108px;
    position: absolute;
    overflow: hidden;
  
}

    </style>
</head>
<body>

<div class = "banner">
    <div class = "bg-green d-flex align-items-center justify-center">
        <div class = "banner-left"></div>
        <div class = "text-shadow text-white h1 p-3 mb-5">This is my header.</div>
        <div class = "banner-right"></div>
    </div>
    <div class = "banner-content">
        <div><img src = "assets/img/Banner01.png"></div>
        <div class = "h1 mt-4">Promise</div>
        <div class = "title01 text-green text-shadow01">Hiquality</div>
        <div class = "title01 title03 text-green text-shadow01">Sample text</div>
        <div class = "title02 text-shadow02">Sample text</div>
        <div class = "title02 text-shadow02" style = "z-index: 1000">Sample text</div>
    </div>
    <div class = "scroll-div">
        <img class = "scroll-bar" src = "https://www.jqueryscript.net/images/User-Friendly-Date-Formatting-Plugin-prettydate.jpg">
    </div>
    <div class = "creative"><img src = "https://www.jqueryscript.net/images/User-Friendly-Date-Formatting-Plugin-prettydate.jpg"></div>
</div>
</body>
</html>

Я изменил код HTML и добавил CSS для отображения текста на изображении. CSS изменения

.title03 {
    padding: 263px !important;
}
.title01 {
    font-size: 4.5rem;
    position: absolute;
    overflow: hidden;
    z-index: 9999;
    padding: 108px;
    position: absolute;
    overflow: hidden;
}

в HTML добавлен один класс с именем title03

<div class = "title01 title03 text-green text-shadow01">Sample text</div>

Не могли бы вы помочь мне показать все элементы баннера, такие как содержимое баннера и «это мой заголовок», на изображении?

— 24.12.2020 14:48

24.12.2020 14:13

Другие вопросы по теме

Изменить форму макета, когда я нажимаю один переключатель

Проблема jQuery с каждым () и функцией добавления для элементов ul и li

Как расположить div относительно изображения?

Как закрыть переключатель при переключении следующего списка

Рисование с использованием пути к значку SVG

HTML — выделение нескольких текстов в нескольких фреймах

Как сделать, чтобы мигающая кнопка отображалась после текста

Событие нажатия клавиши работает только один раз в JavaScript

Изменение отображаемого текста в зависимости от изображения карусели в Bootstrap

Загрузка HTML-формы в виде файла PDF

CSS - я хочу показывать изображения под текстом

Ответы 1

Другие вопросы по теме

Похожие вопросы