div의 배경에 스프라이트를 사용하는 방법

div를 배경으로 적용하려는 div가 스프라이트보다 크고 스프라이트의 일부분 배경으로 사용하고 싶은 것은 스프라이트 맨 위에서 100px입니다.div의 배경에 스프라이트를 사용하는 방법

내가 원하는 스프라이트의 일부가되도록 div의 배경을 설정하려면 및 div의 오른쪽에 배치해야합니다.

내가 무엇을 가지고 :

http://jsbin.com/yibesu/1/edit?html,css,output 내가 "무엇-싶다"배경 사업부의 오른쪽으로 밀어하고, 그것의 나머지 부분은 붉은 색으로합니다.

내 CSS는 : 나는 배경 위치가 "0 -100px는"및은 DIV의 오른쪽으로 밀어되고 싶어처럼

div { 
    background: url('http://i.imgur.com/VBe5ey2.png') red; 
    background-position: 0 -100px; 
    background-repeat: no-repeat; 
    width: 400px; 
    height: 200px; 
}

이 있습니다. 스프라이트의 너비가 div보다 작습니다. 이것이 가능한가? 또는 스프라이트에서 부분을 찢어 내고 이미지를 그대로 유지해야합니까? 감사!

출처

2014-06-18 Ian Davis

가능한 중복 (:

여기

div { background: red url('sprite.png') right -100px no-repeat; }

은 JSBin의 편집 혼란 스럽다입니다 http://stackoverflow.com/questions/7777159/clip-crop-background-image-with-css) – Dai

끝났습니다. 당신이해야 할 유일한 일은 background-position을 사용하여 오른쪽으로 정렬하는 것입니다. 다음과 같이 새 CSS는 다음과 같습니다

div { 
    background: url('http://i.imgur.com/VBe5ey2.png') red; 
    background-position: right -100px; 
    background-repeat: no-repeat; 
    width: 400px; 
    height: 200px; 
}

내가 파이어 폭스, 크롬과 IE11으로 테스트하고 모든 작업을 확인하는 것 같았다.

출처

2014-06-18 21:34:22 entropic

이렇게하고 싶을 때 스프라이트 PNG의 오른쪽에 스프라이트를 배치하고 그 아래에 충분한 수직 공간을 두어 그래픽의 다음 스프라이트가 div의 맨 아래에 보이지 않도록합니다. .

CSS에서 나는 right로 배경 이미지의 수평 위치를 정의 할 : http://jsbin.com/kohivibu/1/edit

[CSS 클립/자르기 배경 이미지]의

출처

2014-06-18 21:35:13

div의 배경에 스프라이트를 사용하는 방법

답변

관련 문제