zyets

Есть решение на чистом css3
Долго не мог понять как работает свойство background-clip: text
Много где про него написано, но не везде объясняется достаточно подробно, что бы понять всю механнику.. За основу беру вот эту статью
Сегодня я это свойство осилил и меня прет поделиться со всеми:
Сразу предлагаю рассмотреть пример, а дальше расскажу, как и что там происходит! Не ругайтесь, хоть и костыли, но оно работает)))
1. background-clip действует по аналогии со свойством clip оно обрезает лишнее. При значении text оно будет обрезать фон по границам текста, находящегося внутри элемента.
2. Что бы этот фон был виден, надо сделать сам текст прозрачным обязательно, ибо текст всегда выше чем фон!
3. Есть подводные камни с другими свойствами, напимер text-shadow. если его применить, то элементы будут располагаться в такой последовательности:
а. снизу фон
б. потом тень от текста (она будет перекрывать всю магию с background-clip)
в. затем сам прозрачный текст.
Можно этого избежать добавив атрибутов и псевдоэлементов

ЗЫ, по ссылке выше в комментах можно найти еще вот такие примеры реализации, они тоже великолепны! Пример, пример

Тоже столкнулся с подобной бедой, только, очевидно, наоборот!...
В моем случае было так:

Я всегда ставлю принудительно:

html{
	overflow-y: scroll;
	overflow-x: auto;
}

Для того, чтоб показывать полосу прокрутки на всех страницах. Зачем? Вот тут можно почитать:
xiper.net/collect/html-and-css-tricks/css-tricks/t...

В свою очередь в Bootstrap, при открытии модального окна, скролл-бар у html отключается (зачем и каким образом хз, не лез в такие дебри)
Чтобы не был дергания, бутстрап ставит для body заглушку в виде padding-right: 15px; на время открытого окна!
Поэтому в моем случае это лечится одной строчкой css:

body{
	padding-right: 0 !important;
}