IMG의 적절한 사용

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

IMG의 실용적인 사용

1. IMG이미지가 로고나 다이어그램 또는 사람 (사진 사람이 아닌 실제 사람)과 같은 컨텐츠의 일부인 경우 플러스 alt 속성을 사용하십시오 . — sanchothefat
2. IMG텍스트 크기에 비례하여 이미지를 렌더링하기 위해 브라우저 크기 조정에 의존하는 경우 사용하십시오 .
3. IE6에서 여러 오버레이 이미지에 사용 IMG
   합니다 .
4. 전체 이미지 를 채우 도록 배경 이미지 를 늘리 려면 IMGa와 함께 사용하십시오 . z-index
   CSS3 background-size에서는 더 이상 적용되지 않습니다. 아래 6 번을 참조하십시오.
5. img대신에 사용 background-image하면 배경에서 애니메이션 성능을 크게 향상시킬 수 있습니다.

CSS 배경 이미지를 사용하는 경우

1. 이미지 가 내용의 일부가 아닌 경우 CSS 배경 이미지를 사용하십시오 . — sanchothefat
2. 텍스트의 이미지 교체를 수행 할 때 CSS 배경 이미지를 사용하십시오 . 단락 / 헤더. — sanchothefat
3. background-image사람들 이 페이지를 인쇄 하도록하고 이미지가 기본적으로 포함되지 않게 하려면 사용하십시오 . — JayTee
4. CSS 스프라이트background-image 와 같이 다운로드 시간을 개선해야하는 경우 사용하십시오 .
5. background-imageCSS 스프라이트와 같이 이미지의 일부만 보이게 하려면 사용하십시오 .
6. 창 전체를 채우도록 배경 이미지를 늘이려면 background-image함께 사용하십시오 background-size:cover.

답변

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

<div id="headerImage"></div>

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}