CSS Sprites - 배경 이미지뿐만 아니라?

"전경"이미지, 즉 사용자가 클릭하여 상호 작용하고 인쇄하는 이미지에 CSS 스프라이트를 사용할 수 있습니까?CSS Sprites - 배경 이미지뿐만 아니라?

대신 CSS background-image 속성을 사용하십시오. 너는 무엇을 사용 하겠는가?

출처

2010-03-11 Summer

당신은 표준 <img /> 태그를 사용하여 제한된 높이/폭 (A <div /> 같은) 컨테이너에 넣을 수 있습니다. 그런 다음 상대 위치 지정 또는 음수 여백을 사용하여 이미지의 위치를 제어하십시오.

출처

2010-03-11 19:37:30

Genius, 감사합니다 !! – Summer

이것은 과잉 IMO입니다. 입력을 블록 표시로 설정하고 방정식에서 div/wrapper를 모두 제거하면 훨씬 간단한 방법입니다. –

@ 닉 그건 말이되지 않습니다. 컨테이너를 사용하지 않고 스프라이트를 어떻게 적용할까요? –

-1

위치를 설정할 수 있어야하므로 스프라이트의 배경 이미지를 사용해야하지만 할 수 있습니다. 이것은 링크 또는 원하는대로 사용할 수 있습니다. 구글의 스프라이트 봐, 그들은 아이 구글에이 버튼에 사용 : http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif이

출처

2010-03-11 19:39:12

-1 'top, left, right, bottom'과 함께 CSS에서 'position'을 사용하여 요소의 위치를 제어 할 수 있습니다. 또는 음수 여백을 사용할 수 있습니다. –

나는 어떤 요소에서도 위치를 제어 할 수 없다고 결코 말하지 않았다. 그러나 모든 요소의 배경 이미지로 작업 할 수 있습니다. –

물론 당신은 할 수 있습니다. 그러나 그들은 * 배경 이미지없이 * 할 수있는 방법을 특별히 요구합니다! –

당신은이 같은 덜 CSS와 함께이 작업을 수행 할 수 있습니다

클래스 class="myClass"을 가지고 무엇이든

.myClass { background: url(../Images/Sprite.png) no-repeat; 
      height: 20px; 
      width: 40px; 
      background-position: -40px 0; 
      display: block; } 
.myClass:hover { background-position: -40px -20px; }

이, 아무것도 그것을 그냥 이미지가 없습니다 그밖에. 원하는 번호는 <a><input> 또는 <div> 일 수 있습니다.

배경 이미지 ...하지만 당신이보고있는 요소이며 그 배경 앞에있는 것은 없습니다. 이 속성에 background-image을 사용하고 있기 때문에 버튼을 클릭 할 수있는 것처럼 전경 요소가 아닙니다. 당신이 좋아하는 작업을 수행 할 수 있습니다

<input type="button" class="myClass" />

출처

2010-03-11 19:58:25

이것은 백그라운드 이미지 기반 솔루션입니다. 질문은 명시 적으로 다른 것을 요구합니다. 그리고 나는 왜 그런지 이해합니다. 문서 내용의 일부인 이미지와 레이아웃 및 스타일의 일부인 이미지 사이에는 분명히 근본적인 차이가 있습니다. – amn

배경 이미지로 처리 할 수없는 하나 개의 기본 요구 사항은 ARIA입니다

. 모든 ARIA 요구 사항은 화면 판독기가 장애가있는 사용자를 대신하여 해석해야하는 의미 있고 탐색적인 "유익한"용도로 배경 이미지 사용을 거부합니다. img 태그에 대한 배경 이미지 CSS 문과 필요한 경우 ARIA 태그를 스왑 할 수 있다는 것은 현재의 규제 개발 환경에서 중요한 기능입니다.

원래 질문에 대한 답변은 예입니다! css 백그라운드 명령문에 표시된 이미지를 사용할 수 있습니다. 그러나 이미지 편집기에서 스프라이트 이미지를 열고 원하는 스프라이트를 나타내는 부분을 선택하여 별도의 이미지로 저장하고 img 태그에서 참조해야합니다.

이러한 상황은 종종 미리 만들어진 제어 라이브러리에서 발생합니다. 배경 이미지를 선택하고 표시하는 라이브러리의 코드를 찾아 변경하는 것은 약간 어렵습니다. 코드를 변경하는 것은 어렵습니다!

출처

2017-05-05 17:33:28

CSS Sprites - 배경 이미지뿐만 아니라?

답변

관련 문제