Сделать задний фон только в пределах текста

@KIKO34 · Регистрация: 20.03.2020

Студворк — интернет-сервис помощи студентам

Только учусь, есть такой кусочек кода, мне нужно что бы фон был только позади текста, как пофиксить? Уже все что знаю перепробовал((( Вот кусок кода и скрин

HTML5
1
2
3
4
<div class="block__title title">
                    <h1>Dashboard</h1>
                    <div class="title__year">mm/dd/yyyy</div>
                </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.block__title {}
 
.block__title h1 {
    background-color: rgba(150, 162, 254, 0.2);
    font-size: 20px;
    font-weight: 900;
    margin: 0 0 20px 0;
 
}
 
.title {}
 
.title__year {
 
    padding: 8px 20px;
    background-color: rgba(150, 162, 254, 0.2);
    border-radius: 5px;
    margin: 0 0 20px 0;
}

@Splaisto · 09.06.2022, 09:25

вынесите title__year за пределы блока block__title title и задайте позиционирование. тут уже весь код надо видеть, что б точнее сказать. может relative пойдет, может absolute.

@AlexZaw · 09.06.2022, 10:53

KIKO34, как вариант для h1 и .title__year добавить width: max-content;

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@Splaisto 250 / 184 / 58 Регистрация: 12.03.2021 Сообщений: 1,043
	09.06.2022, 09:25
	вынесите title__year за пределы блока block__title title и задайте позиционирование. тут уже весь код надо видеть, что б точнее сказать. может relative пойдет, может absolute. 0

@AlexZaw Модератор 2381 / 1741 / 677 Регистрация: 07.08.2016 Сообщений: 4,095
	09.06.2022, 10:53
	Сообщение было отмечено KIKO34 как решение Решение KIKO34, как вариант для h1 и .title__year добавить `width: max-content;` 0

Сделать задний фон только в пределах текста

Решение