이미지와 텍스트를 사용하는 심볼을 인라인으로 만들기

Question

나는 원의 이미지가 크기가 커지기 때문에 크기를 쉽게 작게하거나 크게 할 수 있습니다. 문자의 배경 이미지 또는 텍스트 2 개를 의미합니다.

기본적으로 특정 요소에서 번호 1 또는 2가 나타나는 곳마다 텍스트가 해당 요소에있을 때마다 텍스트 뒤에 원이 나타나기를 원합니다. 텍스트와 함께 섞어서 문제없이 넣을 수있는 다른 이미지가 있습니다. 나는 그들이 갈 필요가있는 곳에 그들을 지키기 위해 그들에 의해 크기를 정하고있다. 예를 들어/질문으로이 작품을 만들기 위해서 그래서

는 : http://gumOnShoe.net/NewCard/Frames/Mana/mana_circle.png가

그래서, 기본적으로,이 같은 일을 할 텍스트를해야합니다 :

This is a paragraph (1) of the text. 

이것은 이미지입니다

여기서 (1)은 내부에 숫자 1로 적절하게 크기가 조정 된 이미지입니다. 이미지는 텍스트를 보정하기 위해 1.2 em이 될 수 있지만 나중에 크기를 조정합니다. 나는 자바 스크립트에서 이것을하고있다. 그러나 누군가 내가 CSS 스타일이 될 것 같은 것을 알아낼 수 있다면 나는 거기에서 그것과 함께 갈 수있다.

페이지에 대한 몇 가지 추가 사항은 심볼/텍스트 하이브리드가 div의 오른쪽에 떠있는 테이블 셀 내에 있어야한다는 것입니다.이 위치는 다른 절대적으로 위치한 div의 내부에 상대적으로 배치되어 있습니다. 어떤 것이 디스플레이 설정을 망쳐 놓을 지 확신 할 수 없지만 그것이 내가보고있는 것입니다. 감사.

Answer 1

포함 할 것 (1) display: inline-block;

이이 범위를 줄 것이다로 설정 스팬의 내부 텍스트와 함께 흐르는 동안 요소 기능을 차단합니다 (배경 이미지와 너비 설정). 속성 background-size을 사용하여 스팬의 동일한 폭으로 설정하여 배경 이미지 크기를 변경할 수 있습니다.

체크 아웃이 JSFiddle입니다.내가 위에서 내 댓글을 편집하지 못할 때문에

Answer 2

모노 공간 글꼴로만 작업하는 것을 볼 수 있습니다. 텍스트가 포함 된 요소의 배경 이미지에 이미지를 사용하십시오. 문자열에서 '1'의 색인을 가져옵니다. background-position을 index + 1의 em 값으로 설정하십시오. 여러 번 나타나는 경우 텍스트가 들어있는 요소 아래에 절대적으로 배치 된 요소를 추가로 레이어해야합니다.

Answer 3

내가 아는 한 CSS를 사용하여 배경 이미지의 크기를 변경할 수 없습니다. 이미지의 크기를 동적으로 조정할 필요가없는 경우 및 다른 CSS 규칙이 설정된 <span>에 숫자를 래핑 할 수 있습니다. 개인적으로

<p> 
    Lorem 
    <img 
     src="http://gumOnShoe.net/NewCard/Frames/Mana/mana_circle.png" 
     style="width: 1em; height: 1em;" /> 
    <span 
     style="margin-left: -1em; 
      width: 1em; 
      display: inline-block; 
      text-align: center;">1</span> 
    ipsum. 
</p> 

하지만, 내가 다른 크기의 이미지를 만들 수 주위에 범위에 대한 배경 - 이미지로 사용할 것 :

그러나, 다음은 CSS display: inline-block;를 지원하는 최신 브라우저에서 작동합니다 . 뭔가 같은 : CSS와

<p class="big-text"> 
    Lorem <span class="number">1</span> ipsum 
</p> 
<p class="small-text"> 
    Lorem <span class="number">1</span> ipsum 
</p> 

... :

p.big-text span.number { 
    background-image: url(/big-circle.png); 
} 

p.small-text span.number { 
    background-image: url(/small-circle.png); 
} 

Answer 4

, 내가 대답으로 게시 생각 :

는 CSS3를 사용하여, 당신은 아마 이런 식으로 그것을 할 수 :

font-family:monospace; 
font-size:2em; 
padding:5px; 
background: url(http://gumonshoe.net/NewCard/Frames/Mana/mana_circle.png) no-repeat center center; 
-webkit-background-size: contain; 
-moz-background-size: contain; 
-o-background-size: contain; 
background-size: contain; 

체크 아웃을 데모 : http://jsfiddle.net/gWhqP/

을