Добавьте фоновое изображение в конец строки динамического текста, позади текста - PullRequest
Новая
       28

Добавьте фоновое изображение в конец строки динамического текста, позади текста

0 голосов
/ 11 октября 2019

Мне нужно поместить изображение позади (или перед - это не имеет значения) моего текста h1, расположив его так, чтобы оно всегда было немного правее конца текста, например так:

Не получается, чтобы фоновое изображение отображалось поверх текста или позади него. Чего мне не хватает? 

h1 {
  text-align: center;
}

h1:after {
  content: "";
  background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") no-repeat;
  background-position: -85px 12px;
  background-size: 32%;
  width: 400px;
  height: 50px;
  position: absolute;
}
<h1>Dynamic Headline</h1>

С :after я не могу получить изображение для отображения позади или над текстом.

Ответы [ 2 ]

0 голосов
/ 11 октября 2019

Я бы обернул текст диапазоном с отступом влево и вправо, а затем поместил изображение в качестве фона диапазона и поместил бы его вправо: 

h1 {
  text-align: center;
}

h1 span {
  padding: 0 1.3em;
  background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") right top no-repeat;
  background-size: contain;
}
<h1>
  <span>Dynamic Headline</span>
</h1>

И та же идея без span, но не поддерживается IE / Edge из-за width: content-fit. 

h1 {
  width: fit-content;
  margin: 0 auto;
  padding: 0 1.3em;
  background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") right top no-repeat;
  background-size: contain;
}
<h1>Dynamic Headline</h1>
0 голосов
/ 11 октября 2019

Чтобы сместить фон для отображения поверх текста, вместо background-position вы ищете margin-left. Однако обратите внимание, что вы не можете применить margin-bottom к абсолютно позиционированному элементу, поэтому вам все равно придется использовать background-position для регулировки вертикального смещения. Я изменил это на 4px в следующем примере: 

h1 {
  text-align: center;
}

h1:after {
  content: "";
  background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") no-repeat;
  background-size: 32%;
  width: 400px;
  height: 50px;
  position: absolute;
  margin-left: -85px;
  background-position: 0 4px;
}
<h1>Dynamic Headline</h1>
...