CSS 만 사용하여 HTML 페이지에 이미지를 표시하는 방법은 무엇입니까?

Question

페이지에 이미지를 표시하고 싶지만 html로 이미지에 대한 참조를 하드 코딩하고 싶지는 않습니다.

HTML :

<span id="got-easier"></span> 

CSS :

#got-easier { image: url(/i/trend-down.gif); } 

(IE6 지원한다)

Answer 1

예, 배경 이미지를 사용

같은 일을 할 수 있나요 :)

#got-easier { background-image: url(/i/trend-down.gif); } 

범위를 display: block;으로 설정하고 이미지를 사용하는 경우 이미지의 너비/높이를 설정해야합니다.

데이빗 도르 워드 (David Dorward)는 정보와 관련된 이미지라면 <img> 태그와 alt 속성이있는 문서에 포함되어야한다고 지적했습니다.

Answer 2

Heya의 일반적인 용어는 이미지 대체 기술 (또는 IR)입니다. 다음은 현재 일반적으로 사용되는 방법입니다. 그냥 둘 중 하나를 선택, 당신은 인라인 이미지를 표시 할 경우

/* Leahy Langridge Method */ 
span#imageName { 
    display: block; 
    height: 0 !important; 
    overflow: hidden; 
    padding-top: 0px; /* height of image */ 
    width: 0px; /* width of image */ 
    background: url(url/of/image.jpg) no-repeat 
} 

/* Phark Method */ 
span#imageName { 
    display: block; 
    width: 0px; 
    height: 0px; 
    background: url(url/of/image.jpg) no-repeat; 
    text-indent: -9999px 
} 

Answer 3

), 위치 : 절대 트릭을 수행합니다

#got-easier { 
    display:inline; 
    position:absolute; 
    width:img-Xpx; 
    height:img-Ypx; 
    background:url(/i/trend-down.gif) no-repeat; 
} 

이 유일한 문제는이다, 그 이미지 위치가 절대적이라면, IE6에서 그 옆에 무엇이든 덮어 씌울 것이고, 이것을 해결하기위한 해결 방법은 IE6에서 지원되지 않습니다 (CSS와 jQuery 모두). 당신의 이미지 - 컨테이너는 새로운 라인을 따라야 할 것입니다.

예를 들어 onmouseover와 함께 도움말을 표시하기 위해 양식 캡션이나 단추 옆에 (?) 이미지를 배치하려는 경우 유용 할 수 있습니다.