Как сделать текст фоном в css
Перейти к содержимому

Как сделать текст фоном в css

  • автор:

Как добавить цвет фона к заголовку текста?

Для изменения цвета фона под текстом используется универсальное свойство background , которое следует добавить к селектору h1 . Цвет заголовка меняется с помощью свойства color , которое также добавляется к этому селектору (пример 1).

Пример 1. Цвет фона под заголовком

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Цвет фона под заголовком   

Закон внешнего мира

Закон внешнего мира методологически выводит интеллигибельный мир, хотя в официозе принято обратное.

Результат данного примера показан на рис. 1.

Цвет фона под заголовком текста

Рис. 1. Цвет фона под заголовком текста

Учтите, что на размер цветного прямоугольника влияет не только размер текста, но и отступы вокруг него. Поэтому регулируйте размер фона за счет свойства padding , добавляя его опять же к селектору h1 .

Как сделать фон для текста?

5df6250a74a10860297965.png

Здравствуйте, как можно сделать фон для текста, примерно как на картинке:

При этом нужно, чтобы он находился в одной обертке, которая является display: inline-block, строки текста нельзя ни во что обернуть и [br] тоже использовать не вариант.
В идеале верстка должны так выглядеть:

 
Тут текст, количество которого не известно

Также не известно какой длинны текст будет в блоке, так что перенос должен зависеть от максимальной ширины wrapper.

  • Вопрос задан более трёх лет назад
  • 7412 просмотров

1 комментарий

Простой 1 комментарий

Ankhena

Ankhena @Ankhena Куратор тега CSS

При этом нужно, чтобы он находился в одной обертке, которая является display: inline-block, строки текста нельзя ни во что обернуть и [br] тоже использовать не вариант.

Откуда взялись все эти условия?

Теоретически, если вы зададите 100500 теней, то проблемы останутся только для краев )))))

Фон под текстом

С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами:

Вариант №1 – разметка тегами

Первый вариант так себе, но работает – обвернуть каждую строку в и добавить переносы строк
.

 


dummy text of the printing
and typesetting industry

.title < font-size: 50px; line-height: 56px; color: #000; >.title span

Фон только под текстом

Текст на элементе слайдера

Как сделать фон именно под текстом, не покрывая пространство между строк.

Отслеживать

задан 28 июн 2017 в 19:42

Vyacheslav Lamash Vyacheslav Lamash

89 2 2 серебряных знака 7 7 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

.ColorRed
blablalbalbalba blablabla bla blablalbablablalbalbalbablablalbalbalbablablalbalbalba blablalbalbalbablablalbal
balbablablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalba
blablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalba
blablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalba

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *