IMG 태그와 함께 스프라이트를 사용하십니까?
스프라이트를 사용하는 방법을 이해합니다. 그러나 IMG 태그에 "src"속성이 필요하지 않습니까? 나는 항상 SPAN 또는 다른 태그를 사용하고 배경 / 너비 / 등을 사용할 수 있습니다.
기본적으로 IMG 태그에 대한 SRC를 생략하고 스프라이트 만 사용하고 싶지만 HTML이 기술적으로 우려되는 것이 있습니다. 감사합니다.
의미 적 서비스 정보 :
이미지가 의미 론적 의미를 가지고 있어 콘텐츠로 제공되는 경우 스프라이트없이 IMG 태그를 사용 하고 ALT를 설정 설정합니다.
이미지가 상자의 배경, 버튼의 배경, 메뉴 옵션의 배경 제출 같이 장식에 불고기 할 의미가 포함 SPAN, DIV 등 의 배경으로 만 사용할 수 있습니다. . CSS에서. 이 경우 스프라이트를 사용할 수 있습니다.
스프라이트를 사용하는 것은 반드시 CSS 배경에서 정의해야하는 것이 아닙니다. IMG 태그 스프라이트를 사용할 수도 있습니다. 이렇게 기본적으로 이미지를 다듬어야합니다. 그 기술을 설명하는 두 가지 좋은 기사가 있습니다.
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp
http://www.artzstudio.com/2010/04/img-sprites-high-contrast/
CSS와 IMG 방법 모두 고유 한 이점이 있으므로 어느 것이 더 포함되어야합니다.
src에 1x1 투명 gif (스페이서라고 함)를 사용합니다. 그런 다음 해당 bg 위치로 해당 img 태그의 배경 이미지를 설정합니다. 이런 식으로 스프라이트의 속도를 활용하고 코드의 의미를 유지합니다 (여전히 대체 속성을 사용할 수 있음).
항상 SPAN 또는 기타 태그를 사용하고 배경 / 너비 / 등을 사용하고 있습니다.
실제로 CSS를 사용하여 span 또는 div의 배경을 설정하는 데 많은 문제가 없습니다. 태그의 전체이기 때문에 이미지에서 src를 생략하는 것이 실제로 구문 상 작성합니다. 표준에는 텍스트가 포함되어 있습니다. 구문 적으로 말하면 요소의 배경을 수정하는 것이 가장 "올바른"방법입니다.
다음은 W3C의 img 태그에 대한 참조입니다. http://www.w3.org/TR/html401/struct/objects.html#h-13.2
그리고 약간의 추가 정보 : http://www.w3.org/TR/html4/struct/global.html#h-7.5.3
다만 요소는 콘텐츠를 인라인 (SPAN) 또는 블록 수준 (DIV)으로 정의하지만 콘텐츠에 다른 표현 관용구를 부과하지 않습니다. 따라서 작성자는 기본 요소를 사용하여 HTML을 자신의 필요와 취향에 맞출 수 있습니다.
CSS 배경 또는 HTML Canvas 요소를 사용하여 동적으로 그릴 수 있습니다. 캔버스를 사용하면 이미지를 쉽게 하위 집합으로 만들고 블렌드 모드 효과를 수행 할 수 있습니다 .
당신은 당신의 선택을 다시 생각하여 해결합니다.
당신은에 정의 된 영역을 작성 <a>하여 display:block;또는 <div>사용하는 overflow hidden;클라이언트 오버 플로우와 position:relative;.
그런 다음 <img>이미지 스프라이트를 절대 위치에 배치합니다. 이는 대부분을 배치 때문에 가능합니다.
그런 다음 :hover이미지에 사용 하여 위치를 변경하십시오.
이제 스프라이트가 img 태그를 기반으로 alt텍스트를 사용할 수 있습니다 .
다음 예제는 아이콘의 두 가지 버전이 서로 위에있는 Facebook 스프라이트를 기반으로하며, 각각 50px x 50px, 총 이미지 높이는 100px입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.icon {
display:block;
position:relative;
width:50px;
height:50px;
border:1px solid red;
overflow:hidden;
}
#fb {
position:absolute;
top:0;
left:0;
}
#fb:hover {
position:absolute;
top:-50px;
left:0;
}
</style>
</head>
<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>
참고 URL : https://stackoverflow.com/questions/4335957/using-sprites-with-img-tag
'ProgramingTip' 카테고리의 다른 글
| OOCalc에서 CONCATENATE 함수로 견적을 인용하는 방법 (0) | 2020.11.30 |
|---|---|
| 특정에 있는지 확인 (0) | 2020.11.30 |
| 보기 컨트롤러의보기에 사용자 지정 하위보기 (xib에서 생성됨) 추가-내가 뭘 잘못하고 있니? (0) | 2020.11.30 |
| 셸에서 여러 파일 이름 많이 (0) | 2020.11.30 |
| JSON 객체를 JavaScript 배열로 변환하는 방법 (0) | 2020.11.30 |