IMG와 CSS 배경 이미지의 적절한 사용시기

 

질문 : IMG와 CSS 배경 이미지는 언제 사용합니까?

---

background-image IMG 태그를 사용하여 이미지를 표시하는 것이 더 적합한 상황은 무엇입니까?

요인에는 접근성, 브라우저 지원, 동적 콘텐츠 또는 모든 종류의 기술적 제한 또는 사용성 원칙이 포함될 수 있습니다.

답변

---

IMG의 적절한 사용

1. 다른 사용자가 페이지를 인쇄하도록 하려면 IMG를 사용하십시오. 이미지가 기본적으로 포함되도록 하려면 IMG를 사용하십시오.—JayTee
2. 이미지에 경고 아이콘과 같은 중요한 의미 의미가 있는 경우 IMG(Alt 텍스트 포함)를 사용합니다. 이렇게 하면 화면 판독기를 포함한 모든 사용자 에이전트에서 이미지의 의미가 전달될 수 있습니다.

CSS background-image 사용 시기

1. 이미지가 로고, 다이어그램 또는 개인(스톡 포토 피플이 아닌 실제 인물)과 같은 내용의 일부인 경우 IMG + alt 속성을 사용합니다.—sanchothefat
2. 텍스트 크기에 비례하여 이미지를 렌더링하기 위해 브라우저 스케일링을 사용하는 경우 IMG를 사용합니다.
3. IE6의 여러 오버레이 영상에 IMG를 사용합니다.
4. 배경 이미지를 확장하여 전체 창을 채우려면 IMG를 z 인덱스와 함께 사용합니다.
   CSS3 배경 크기에서는 더 이상 해당되지 않습니다. 아래 #6을 참조하십시오.
5. 배경 이미지 대신 img를 사용하면 백그라운드에서 애니메이션 성능을 획기적으로 향상시킬 수 있습니다.

CSS background-image 사용 시기

1. 이미지가 컨텐츠의 일부가 아닌 경우 CSS 배경 이미지 사용—sanchothefat
2. 텍스트(예: 문단/헤더)의 이미지 교체를 수행할 때는 CSS 배경 이미지를 사용하십시오.—sanchothefat
3. 다른 사용자가 페이지를 인쇄하도록 하려면 background-image를 사용하십시오. 기본적으로 이미지가 포함되지 않도록 하려면 이 이미지를 사용하십시오.—JayTee
4. CSS 스프라이트와 마찬가지로 다운로드 시간을 단축해야 하는 경우 background-image를 사용합니다.
5. CSS 스프라이트와 같이 이미지의 일부만 표시되어야 하는 경우 background-image를 사용합니다.
6. background-image with background-size:cover를 사용하여 전체 창을 채우도록 배경 이미지를 확장합니다.

출처 : https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image