2011-08-22 2 views
1

내가 그렇게, HTML에 이미지를 대체하기 위해 CSS를 사용하는텍스트 들여 쓰기도 들여 쓰기 <img>?

<img class="flechaTooltip" src="oldpath" /> 

turns into 

    .flechaTooltip { 
    width: 0; 
    height: 0; 
    padding: 11px 209px 0 0; /* New image's dimensions here */ 
    background: url(../../nImg/flechaTooltipGris.gif) no-repeat; 
    /* Removing image from older Opera */ 
    content: ""; 
    display: inline-block; 
} 

을 시도하고있다 그러나 어떤 효과, 왜 어떤 생각을하지 않는 것?

-edit-

내가 IMG 텍스트를 대체하기 위해이 기술을 사용하지만, 다른 IMG에 대한 IMG를 교체 해본 적이

답변

4

인라인 요소와 라인을 사용하는 거라고, 그래서 만약 단지, 흐름 인라인 요소에 작동하는 text-indent (또는 다른 인라인 또는 인라인 블록 요소)가 작동합니다. 당신을 위해 jsfiddle 여기

.flechaTooltip { 
    width: 0; 
    height: 0; 
    padding: 50px 300px 0 0; /* New image's dimensions here */ 
    background: url(newpath); 
    /* Removing image from older Opera */ 
    content: ""; 
    display: inline-block; 
} 

: 그리고 내가 볼 http://jsfiddle.net/kizu/kNAgT/4/

+0

좋은데,이 기술은 모든 브라우저에서 지원됩니까? 감사! –

+1

그래, 당신이 언급 한 것이 좋다 : 오래된 Opera에 문제가있다는 것을 재차 알았 기 때문에 수정 된 내용을 포함하여 내 코드를 업데이트했다 (다른 브라우저에서 사용하는 것이 안전하므로 필요하지 않음). 해킹에서). – kizu

+0

http://keepyourlinks.com/uploads/284/Dibujo_2.JPG 미성년자가 파란 색을 제거하고 파란 색이있는 회색톤 (newpath)을 표시하려면 CSS를 질문에 넣으십시오 –

1

아니, 그것은 이미지가 전혀 포함되어 있지 ... 않기 때문에 들여 쓰기 텍스트.

그러나 이미지를 다른 요소 (예 : p 또는 div)로 묶어 원하는 효과를 얻을 수 있습니다.

그래서

<p class="flechaTooltip"><img src="oldpath" /></p>

예 : http://jsfiddle.net/jasongennaro/v7GyN/

+0

, 당신은 다음과 같은 CSS를 사용하여 새 이미지의 크기를 알고있는 경우

그러나, 당신은 CSS를 사용하여 다른 이미지로 이미지를 대체 할 수 있습니다 내 질문은 내가 CSS (외부 이유), 고마워 편집해야 할 일을하려고했기 때문에! –