Централизованное объединение двух изображений с помощью Bootstrap 5
У меня есть строка начальной загрузки из двух столбцов, и в одном столбце нужно иметь полупрозрачное фоновое изображение, покрывающее все, с темным фоном под ним, чтобы создать контраст для центрирования логотипа внутри элемента div.
Поэтому я пробовал всевозможные способы сделать это, но не смог найти ответный выход.
В ручке ниже мне нужна фотография кофе, покрывающая весь элемент div, как если бы это было фоновое изображение; Подгонка объекта у меня просто не работает, и я не хочу никакого переполнения за пределами div. И логотип должен быть по центру внутри элемента div, накладывающего эту фотографию. Использование бутстрапа 5.
.wrapper {
background: black;
}
.overlay {
opacity: .5;
}
.logo {
position: absolute;
top: 0px;
translate: -50%, -50%;
}<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "container">
<div class = "row">
<div class = "col-6 d-flex justify-content-center flex-column">
<h3>Title here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu tortor eget sem elementum malesuada. Sed ac arcu nec magna facilisis aliquet. Sed ac pellentesque tortor. Quisque consequat dolor non iaculis molestie.</p>
</div>
<div class = "col-6 wrapper">
<img src = "https://images.pexels.com/photos/302899/pexels-photo-302899.jpeg" width = "800px" height = "575px" class = "overlay object-fit-cover">
<img src = "https://www.bluecapcoffee.com/wp-content/uploads/2023/06/Lavazza.png" class = "logo" width = "150px" height:"150px">
</div>
</div>
</div>Интересный. Я только что заказал 10 упаковок Lavazza 30 минут назад.
Поиграйте с этим — codepen.io/qeeebmnq-the-looper/pen/dyBZqEM. Вашему div-оболочке нужна высота, поскольку оболочка является элементом, содержащим изображение. Canvas устанавливает для изображения bk полный фоновый элемент div.
@ZADorkMan, в вашем коде есть несколько ошибок, поэтому он не работает. Кроме того, вы технически не правы. Вы не используете и не должны использовать «холст». Просто используйте background-size: cover, если хотите пойти по этому пути. Для правильной работы вам также необходимо удалить запятую из значений перевода. Обертке не нужна высота, поскольку ее высота задается через сетку Bootstrap (flexbox).
Спасибо — да, я думаю, что скопировал неправильно codepen.io/qeeebmnq-the-looper/pen/dyBZqEM, но я думаю, что ваш ответ лучше. Я имел в виду «прикрытие», а не canvas, извините, еще рано.
Ответы 1
Просто следуйте Документации Bootstrap: позиция:
Контейнеру нужен класс: position-relative
Элементу логотипа нужны классы: position-absolute top-50 start-50 translate-middle
оверлей также должен предотвратить переполнение класса w-100 и позволить object-fit-cover работать.
.overlay {
opacity: .5;
}<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "container">
<div class = "row">
<div class = "col-6 d-flex justify-content-center flex-column">
<h3>Title here</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu tortor eget sem elementum malesuada. Sed ac arcu nec magna facilisis aliquet. Sed ac pellentesque tortor. Quisque consequat dolor non iaculis molestie.</p>
</div>
<div class = "col-6 wrapper position-relative">
<img src = "https://images.pexels.com/photos/302899/pexels-photo-302899.jpeg" class = "overlay object-fit-cover w-100">
<img src = "https://www.bluecapcoffee.com/wp-content/uploads/2023/06/Lavazza.png" class = "logo position-absolute top-50 start-50 translate-middle" width = "150px" height:"150px">
</div>
</div>
</div>Отлично, огромное спасибо. Мне не хватало применения w-100; Я читал, что для изображения требуется объявленное значение ширины, что я и сделал, но не знал, что в CSS требуется 100% ширина. еще раз спасибо
По сути, вы хотите, чтобы логотип располагался по центру по вертикали и горизонтали для всех размеров экрана. Верно ?