Стилизация текста на изображении
У меня есть изображение и текст в двух разных div с цветом фона, текст в одном блоке длинный, а во втором - короткий, но ширина обоих блоков одинакова, чего я не хочу. Вот мой код:
.banner{
position: relative;
}
.banner img{
width: 100%;
}
.image-text{
position: absolute;
top: 40%;
left: 8%;
}
.image-text h2{
font-size: 22px;
font-weight: bolder;
color: #fff;
margin: 0px;
}
.upper-text{
background: #2b96c3;
padding: 5px 10px;
}
.lower-text{
background: #0d729c;
padding: 5px 10px;
}<section>
<div class = "banner">
<img src = "https://i.imgur.com/xTeFbiv.jpg">
<div class = "image-text">
<div class = "upper-text">
<h2>Excellent Successfull</h2>
</div>
<div class = "lower-text">
<h2>Sustainable</h2>
</div>
</div>
</div>
</section>Все, что мне нужно, это как на картинке, желаемый результат:
.Я перепробовал много уловок, но не понял, как это сделать.
о, спасибо, дружище. у меня это сработало!
—
09.11.2018 12:56
Нет проблем - с таким же успехом можно закрыть этот вопрос, поскольку сомнительно, что он будет полезен для будущих пользователей;)
—
09.11.2018 12:57
Улучшение производительности загрузки с помощью 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 страниц, которые помогут...
0
3
54
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Сделайте отображение второго блока div inline-block так, чтобы он не занимал 100% ширины.
Вот пример:
.banner{
position: relative;
}
.banner img{
width: 100%;
}
.image-text{
position: absolute;
top: 40%;
left: 8%;
}
.image-text h2{
font-size: 22px;
font-weight: bolder;
color: #fff;
margin: 0px;
}
.upper-text{
background: #2b96c3;
padding: 5px 10px;
}
.lower-text{
background: #0d729c;
padding: 5px 10px;
display: inline-block;
}<section>
<div class = "banner">
<img src = "https://i.imgur.com/xTeFbiv.jpg">
<div class = "image-text">
<div class = "upper-text">
<h2>Excellent Successfull</h2>
</div>
<div class = "lower-text">
<h2>Sustainable</h2>
</div>
</div>
</div>
</section>Другие вопросы по теме
Как скрыть фоновое изображение через 5 секунд только с помощью CSS?
Использовать фоновое изображение с помощью файла css в ReactJs
Chrome не отображает цвет фона для одного дочернего элемента с абсолютным позиционированием с z-индексом и прокруткой переполнения
Есть ли способ сделать так, чтобы элемент svg мог выделяться на странице html?
Медиазапрос для сетки начальной загрузки
CSS / jQuery - Изображение с соотношением сторон 16x9 - Соответствие размерам div
Вытяните центрированный элемент в одну сторону
Slick Slider: прокрутите до последнего слайда, если слайдер находится в области просмотра
Значение CSS Grid template-rows не меняется
Высота 100% на css и bootstrap
Похожие вопросы
HTML / Javascript Canvas Функция drawImg
Как я могу создать расширенную таблицу с использованием HTML и angular js?
Получить значение атрибута тега, когда вкладка активна
Chrome не отображает цвет фона для одного дочернего элемента с абсолютным позиционированием с z-индексом и прокруткой переполнения
Игра Pacman: проверка и обновление действительных позиций 2d-массива - Javascript
Есть ли способ сделать так, чтобы элемент svg мог выделяться на странице html?
Подтверждение результатов запроса Echo PHP в javascript
Упорядочивание ячеек в таблице с несколькими интервалами строк
Медиазапрос для сетки начальной загрузки
Очистка веб-сайта с помощью getElementsByClassName -> неправильные результаты
.lower-text {display:inline-block;}