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

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

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

<h1 class="title">
	<span>Lorem Ipsum is simply</span>
	<br><span>dummy text of the printing</span>
	<br><span>and typesetting industry</span>
</h1>
HTML
.title {
	font-size: 50px;
	line-height: 56px;	
	color: #000;
}
.title span {
	padding: 0 10px;
	background: rgba(37,219,237,0.8);
}
CSS

Второй без лишних тегов. Отступы задаются с помощью box-shadow: -10px 0 0 #FE8020, 10px 0 0 #FE8020;.

<h1 class="title">
	<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
</h1>
HTML
.title {
	font-size: 50px;
	color: #000;
	padding-left: 10px;
	line-height: 59px;
}
.title span {
	display: inline;
	background-color: #FE8020;
	box-shadow: -10px 0 0 #FE8020, 10px 0 0 #FE8020;
	padding: 10px 0;
	color: #FFFFFF;
	font-size: 45px;
}
CSS

Пример с полупрозрачностью:

<h1 class="title">
	<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
</h1>
HTML
.title {
	font-size: 50px;
	color: #000;
	padding-left: 10px;
}
.title span {
	display: inline;
	background-color: rgba(0, 0, 0, 0.5);
	box-shadow: -10px 0 0 rgba(0, 0, 0, 0.5), 10px 0 0 rgba(0, 0, 0, 0.5);
	padding: 0 10px 0 0;
	color: #FFFFFF;
	line-height: 14px;
	font-size: 45px;
}
CSS

CSS свойство box-decoration-break: clone; добавляет отступы у переносимых строк, но не все браузеры его поддерживают.

<h1 class="title">
	<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
</h1>
HTML
.title {
	font-size: 50px;
	color: #000;
	padding-left: 10px;
	line-height: 59px;
}
.title span {
	display: inline;
	background-color: #b5226c;
	padding: 5px 10px;
	color: #FFFFFF;
	font-size: 45px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;   
}
CSS

Во всех вариантах градиент нормально не работает из-за отдельных тегов, box-shadow или «переносится» в месте с текстом, как в примере:

Есть один способ – mix-blend-mode: lighten; (режим смешивания фоновых слоёв). Минус его в том что фон страницы должен быть однотонным и белый цвет текста.

<h1 class="title">
	<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
</h1>
HTML
.title {
	position: relative;
	background-color: #fff;
}
.title span {
	font-size: 50px;
	color: #fff;
	background: #000000;
	padding: 0 10px;
	line-height: 56px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.title::after {
	position: absolute;
	content: '';
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background: linear-gradient(135deg, rgba(37,219,237) 0%,rgba(183,60,210) 100%);
	mix-blend-mode: lighten;
}
CSS
02.07.2019, обновлено 26.09.2019
42269

Комментарии

, чтобы добавить комментарий.

Другие публикации

Слайдер bxSlider на всю ширину сайта
Пример верстки слайдера на плагине bxSlider, который растягивается на всю ширину сайта, оставляя по центру...
3849
0
Плавное увеличение фонового изображения
В CSS3 появилось свойство animation, с помощью которого можно задать элементу скорость и параметры изменения других...
4350
+1
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
26778
+6
Список MIME типов
Ниже приведён список MIME-заголовков и расширений файлов.
9163
+3
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
32193
+13
Повышение результатов PageSpeed Insights
Сборник советов как поднять оценку в PageSpeed Insights.
10224
+2