Могу ли я добавить изображение позади одного слова в абзаце - PullRequest
1 голос
/ 05 февраля 2020

Я хочу добавить изображение мазка за определенными словами в абзаце, как в этом примере: https://i.stack.imgur.com/KzjGn.png. Я попытался добавить простой фон к диапазону, но изображение выходит за пределы отступа и обрезается. Например:

.highlight1 {
  background: url(ImageUrl.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0;
  margin: 0;
}

Любая помощь будет отличной! Спасибо!

Ответы [ 2 ]

2 голосов
/ 05 февраля 2020

Этот код не должен вызывать обрезание фонового изображения. Это, однако, исказит изображение, которое может быть нежелательным.

Возможно, вы захотите добавить некоторые отступы, чтобы текст находился внутри черты bru sh.

padding: 5px 20px;

Или что-то в этом роде.

Я проверил это как следует, и, кажется, работает:

* {
  font-size: 30px;
}
span {
  background: url('https://www.onlygfx.com/wp-content/uploads/2017/04/grunge-brush-stroke-banner-2-17.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 5px 20px 10px 20px;
  margin: 0;
  color: white;
}
<p>
  
  This is a <span> Test </span>
 
</p>
1 голос
/ 05 февраля 2020

Использование background-size: cover;

p {
  font-size: 2em;
}
#abc {
  background: url("https://i.stack.imgur.com/KzjGn.png");
  background-size: cover;
}
<p>aaaaa aaaaa aaaaa <span id="abc">aaaaa</span> aaaaa aaaaa aaaaa</p>
...