Текст за изображением, используя абсолютное изображение в качестве фонового изображения

ProgramBox

Текст за изображением, используя абсолютное изображение в качестве фонового изображения

Post author:admin
Запись опубликована:2 января, 2022
Post category:Вопросы по программированию

#css #twitter-bootstrap

#CSS #твиттер-загрузчик

Вопрос:

Я пытаюсь создать баннер с фоновым изображением, используя Bootstrap 5, но фактически не используя фоновое изображение css, потому что я хочу, чтобы на изображении был тег alt. Приведенное ниже работает нормально, но я должен сделать так, чтобы контейнер занимал позицию relative , в противном случае текст как бы располагается за изображением, и вы вообще не можете взаимодействовать с текстом. Есть ли обходной путь для этого или это единственный способ?

ОБНОВЛЕНИЕ: добавлен фрагмент кода для отображения проблемы

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;meta charset="utf-8"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"gt;  lt;meta name="description" content=""gt;  lt;meta name="author" content=""gt;  lt;titlegt;Starter Template · Bootstraplt;/titlegt;      lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"gt;    lt;stylegt;  /*layout*/  section {  padding: 3.75rem 0;  position: relative;  }   .position-md-absolute {  position: absolute;  }   .bg-image {  top: 0;  left: 0;  width: 100%;  height: 100%;  z-index: 0;  }   img.bg-image {  object-fit: cover;  }    lt;/stylegt;  lt;/headgt;  lt;bodygt;   lt;section class="bg-dark "gt;  lt;img src="https://images.unsplash.com/photo-1638625602435-cdcf92e631f7?ixlib=rb-1.2.1amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8amp;auto=formatamp;fit=cropamp;w=2070amp;q=80" alt="Image" class="bg-image position-md-absolute" style="opacity: 0.8;" /gt;  lt;div class="container py-4 height-md-60"gt;  lt;div class="row"gt;  lt;div class="col-md-7 col-lg-6"gt;  lt;h1 class="display-4 text-white"gt;  Some heading  lt;/h1gt;  lt;p class="lead text-white"gt;  Some content  lt;/pgt;  lt;a href="#" class="btn btn-lg btn-primary"gt;  Learn More  lt;/agt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/sectiongt;  lt;/bodygt;  lt;/htmlgt;

1. «Текст находится за изображением». Это не должно подходить, учитывая ваш CSS — есть ли какие-либо другие CSS, мешающие ему?

2. Я только что запустил ваш фрагмент, и он не показывает проблему, которую вы описываете. Пожалуйста, попробуйте сами и добавьте все, что нужно, чтобы показать проблему. В противном случае любой ответ является всего лишь предположением и бесполезен, поскольку мы не знаем всех ваших обстоятельств.

3. @AHaworth абсолютно никакого другого css. Просто загрузив загрузчик таким образом lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"gt; , я посмотрю, смогу ли я привести здесь пример, но это единственная разница

4. «Абсолютно никакого другого CSS» — хм, разве Bootstrap не набит CSS? Однако, сказав, что я все еще не могу воссоздать вашу проблему. Черный текст немного теряется на темной картинке, которую я использовал, но он определенно «сверху».

5. @AHaworth, извините, я не имел в виду ни один из моих собственных css, за исключением 100000000 стилей начальной загрузки. Да, я попробовал это в codepen, и это сработало нормально, так что происходит что-то странное, что мне придется попробовать и отладить.

Ответ №1:

Для этого вы можете использовать css-сетку. В приведенном ниже коде я создал сетку с одной «основной» областью и поместил в нее изображение и текст. Также я использовал css flex для выравнивания текста внутри контейнера.

 .container {  display: grid;  grid-template-areas: 'main';  width: 200px;  height: 200px; } .bg-image, .text-box {  grid-area: main; } .text-box {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center; }  /* additional styling */ h2, p {   margin: 5px 0; } .text-box {  color: white;  text-shadow: 0 0 3px black;  font-size: 20px; }

 lt;div class='container'gt;  lt;img class='bg-image' src='https://i.picsum.photos/id/648/200/200.jpg?hmac=Kb_qhDdDfOGevrbabLvz4Tp3fu-M7DxQE6APqQRnwVw' alt='Image' /gt;  lt;div class='text-box'gt;  lt;h2gt;Some Titlelt;/h2gt;  lt;pgt;Some textlt;/pgt;  lt;/divgt; lt;/divgt;