Позиционирование текста над фоновым изображением - PullRequest
Новая
       62

Позиционирование текста над фоновым изображением

0 голосов
/ 12 февраля 2020

Я пытаюсь создать пентаграмму Цицерона, используя HTML и CSS. Я хочу, чтобы таким образом можно было добавлять эффекты наведения и всплывающую подсказку к тексту, но как разместить текст вблизи краев звезды? (как на этом изображении) Я пытался использовать таблицы, но это не совсем то, что я хотел.

enter image description here

HTML

  <div class="rhetoricalpentagon">
<p>Topic
Sender
Intention
Receiver
Circumstances
Language</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>

CSS

.rhetoricalpentagon 
{background: #ffffff;  
 background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/ac/Pentacle.png"); 
 background-repeat: no-repeat; 
 background-position: center; 
 height: auto; 
 width: auto; 
 color: #222222; 
 margin: 0 auto; 
 outline-style: none;}

А jsfiddle здесь

...