Фон текста не влияет на размер текста и центрирование - PullRequest
4 голосов
/ 17 июня 2020

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

.large {
  font-family: 'Roboto', sans-serif;
  font-size: 300px;
  line-height: 0.8;
  margin: 0;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Winnersh_Meadows_Trees.jpg/1200px-Winnersh_Meadows_Trees.jpg);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: 50% 50%;
  font-weight: 900;
  text-align: center;
}
<p class="large">000</p>

При номере ошибки 401 он не центрируется.

.large {
  font-family: 'Roboto', sans-serif;
  font-size: 300px;
  line-height: 0.8;
  margin: 0;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Winnersh_Meadows_Trees.jpg/1200px-Winnersh_Meadows_Trees.jpg);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: 50% 50%;
  font-weight: 900;
  text-align: center;
}
<p class="large">401</p>

Проблема, с которой я сталкиваюсь, заключается в том, что текст по какой-то причине смещается по центру, потому что выделение всего этого выделяет больше места справа, и я могу Не понимаю, почему это может быть.

Вот пример лишнего места.

GIF Example

Надеюсь, вам ясно, что я имею в виду , Я просто не уверен, что могло быть причиной этого.

Example of extra space

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

Text overflow.

Text overflow with DIV selected.

Это прекрасно, хотя с 404

404

Это может быть что-то, что нельзя изменить, основные проблемы заключаются в том, что текст имеет более выбираемый с помощью выделение всего против выделения с помощью мыши и тот факт, что текст не всегда центрируется из-за формы символа. Очевидно, контейнер можно сделать меньше для текста, чтобы исправить это, но тогда он меньше и на 404. Мне просто интересно, как по-настоящему центрировать его независимо от формы персонажа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...