글 머리 기호로 이미지 만들기

나는 http://prntscr.com/3etg6t과 같은 이미지를 가지고있다. 나는 이것을 나의 신청서에서 원할 것이다. 그러나 원 (색이있는)을 바꿀 수 있기를 원합니다. 그래서, 가치와 색상. 그러나 나는 어떻게 내가 이것을 능숙하게 할 수 있었는지 생각해왔다. 일부 CSS에서 가능합니까? 아니면 PHP로 생성해야합니까?글 머리 기호로 이미지 만들기

아이디어 환영합니다!

출처

2014-04-30 Write Down

용기에 position: relative, 총알에 position: absolute을 사용하면됩니다.

CSS :

#body { 
    background: url('http://i.imgur.com/5cXq5VT.jpg') no-repeat; 
    position: relative; 
    height: 500px; 
} 

.bullet { 
    position: absolute; 
    background-color: red; 
    padding: 2px; 
}

HTML :

<div id="body"> 
    <div class="bullet" style="top: 50px; left: 310px;">:)</div> 
    <div class="bullet" style="top: 135px; left: 290px;">no</div> 
    <div class="bullet" style="top: 135px; left: 325px;">no</div> 
    <div class="bullet" style="top: 240px; left: 300px;">nope</div> 
</div>

결과 :

enter image description here