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

02.07.2019

101666

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

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

Первый вариант так себе, но работает – обвернуть каждую строку в <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

Вариант №2 – box-shadow

Второй без лишних тегов. Отступы задаются с помощью 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

Вариант №3 – box-decoration-break: clone

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