Могу ли я добавить изображение позади одного слова в абзаце

Question

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

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

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

Answer 1

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

Возможно, вы захотите добавить некоторые отступы, чтобы текст находился внутри черты 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>

Answer 2

Использование 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>