Блог

Главная - Вопросы по программированию - Создайте блок с отдельными фонами на самом блоке и текстом внутри него

Создайте блок с отдельными фонами на самом блоке и текстом внутри него

#html #css

Вопрос:

Эффект, которого я добиваюсь, заключается в том, чтобы иметь разные фоны на блоке и текст внутри блока, как это:

 body {
  background-color: indigo;
}
p {
  background-color: orange;
  text-align:center;
  font-size: 20px;
}
span {
  display: inline-block;
  padding: 0 0.5em;
  background-color: moccasin;
} 
 <p><span>Highlight this text</span></p>

Есть ли способ сделать это без <span> элемента? Итак, только с помощью CSS и следующей HTML-разметки?

 <p>Highlight this text</p>

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

Ответ №1:

Да и без псевдоэлемента

 body {
  background-color: indigo;
}

p {
  font-size: 20px;
  padding: 0 0.5em;
  display:table; /* fit text content*/
  margin:auto; /* center */
  background-color: moccasin; /* main background */
  box-shadow:0 0 0 200vmax orange; /* a huge shadow to simulate the second background */
  clip-path:inset(0 -100vmax); /* clip the shadow to show only left/right part of it */
} 
 <p>Highlight this text</p>
Метки: