이것은 "유효한"CSS 이미지 대체 기술입니까?

Question

난 그냥이 함께했다, 모든 현대적인 브라우저에서 작동하는 것 같다, 난 그냥 다음에 그것을 테스트 (IE8/호환성, 크롬, 사파리, 모즈)

HTML

<img id="my_image" alt="my text" src="images/small_transparent.gif" /> 

CSS

#my_image{ 
    background-image:url('images/my_image.png'); 
    width:100px; 
    height:100px;} 

프로의 :

• 이미지 대체 텍스트 접근성/SE를위한 최선의 방법입니다 오
• 여분의 HTML 마크 업 및 CSS를 꽤 최소한 없습니다 너무
• 온/"텍스트 들여 쓰기"기술은 낮은 대역폭 사용자

가장 큰 단점에서 텍스트를 숨길 이미지 해제 문제는 CSS 주위에 도착 당신이 투명 GIF를 보낼 것이기 때문에 내가 생각할 수있는 CSS는/상황에 대한 이미지입니다.

스타일 시트없이 이미지를 사용하는 사람은 누구입니까? 어떤 종류의 휴대폰이나 뭐?

나는 호주에서 가장 가까운 도시에서 수백 킬로미터 떨어진 곳에 고객을위한 사이트를 만들고 있는데, 전화 접속 연결에 시달리는 사용자가 많으며 브라우저가 오래된 브라우저이기 때문에 이미지가 나지 않는 경우가 종종 있습니다. 중요한 고려 사항입니다.

이 기술에 대한 다른 부작용이 있습니까?

편집 : 그냥

A. 내가

B. 나는과 CSS를 생성 할 수 있습니다 CSS-스프라이트를 사용할 수 있기 때문에 나는 정상적인 이미지 태그를 통해이 사용하는 거라고 여분의 정보를 추가하고 싶었 단일 배열을 사용하여 다른 하위 도메인간에 백그라운드 이미지 소스를 번갈아 변경하는 PHP

C. 이미지의 크기를 조절하면 확대되거나 변형되지 않으므로 페이지의 다른 모든 것과 같이 작동합니다.

Answer 1

일반 이미지 태그에 어떤 문제가 있습니까? img 태그는 콘텐츠에 이미지가있을 때 사용하기위한 태그이며, CSS는 실제 콘텐츠가 포함되지 않아야합니다. 다른 한편, 프리젠 테이션 이미지는 div 등의 배경 이미지로 설정 한 다음 CSS를 통해 처리하여 콘텐츠 및 구조적 마크 업을 간섭하지 않도록해야합니다.

이렇게 할 필요가없는 시나리오는 없습니다. 당신이 CSS이 꺼져있을 때, 당신은 오래된 충실한 텍스트 들여 쓰기 기술을 사용할 수 있습니다 정상적으로 저하 이미지 대체 기술을 원하는 경우에

:

#element { 
    width: 100px; 
    height: 100px; 
    background: image(pic.jpg); 
    text-indent: -9999px; 
} 

<div id="element">This text will show if CSS is off, otherwise an image is displayed.</div> 

Answer 2

타투는 바로 당신은 들여 쓰기를 필요로하지 않는 것하지만 . 그냥 img의 src로 원하는 이미지를 넣으십시오. 그런 다음 이미지가 꺼지면 텍스트를 가져오고 (대체 텍스트는 img에서 CSS를 사용하여 스타일을 지정할 수 있음) 이미지를 가져올 때 이미지를 표시합니다.

'이미지 대체 방법'의 가장 큰 점은 사람들이 머리글의 스타일을 지정할 때 alt 속성의 텍스트를 사용하여 검색 색인이 올바르게 만들어지기를 바랍니다. img는 CSS 또는 추가 마크 업없이 작업을 수행합니다.

Answer 3

클라이언트가 이상한 글꼴을 원할 때 h1/h2 태그에서 이런 종류의 기법을 사용합니다. Heres 내가 어떻게하는지 http://flowdev.tumblr.com/post/1187111884/the-power-of-h1-and-h2-tags

내가 아는 한 모든 브라우저에서 작동합니다.