CSS3 - 스프라이트 이미지의 'background-position'사이를 흐리게 처리합니다.

스프라이트 이미지 의 'background-position'과 CSS 사이에서만 페이드하고 싶습니다. 튜토리얼을 많이 찾았지만 다음과 같은 간단한 것을 찾지 못했습니다.CSS3 - 스프라이트 이미지의 'background-position'사이를 흐리게 처리합니다.

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 - Fade between 'background-position' of a sprite image</title> 
<style type="text/css"> 
div{ 
    width: 120px; 
    height: 60px; 

    background-image:  url('sprite.jpg'); 
    background-repeat:  no-repeat; 
    background-position: 0 0; 

} 
div:hover{ 
    background-position: 0 -60px; 
} 
</style> 
</head> 
<body> 
<div></div> 
</html>

고맙습니다. 이 같은

출처

2013-04-09 CBuzatu

무엇이 작동하지 않습니까? – chriz

페이드가 작동하지 않습니다. – CBuzatu

페이드를 설정하지 않았습니다.지원하려는 브라우저의 수에 따라 javascript 또는 css3 애니메이션을 사용하여 수행 할 수 있습니다. – Kyle

답변을 찾았습니다. 어쨌든 감사드립니다.

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>CSS3 - Fade between 'background-position' of a sprite image</title> 
<style type="text/css"> 
#button{ 
    float:     left; 
    background-image:  url('sprite.jpg'); 
    background-position: 0 -60px; 
    background-repeat:  no-repeat; 

    width:    120px; 
    height:    60px; 
} 
#button a{ 
    background-image:  url('sprite.jpg'); 
    background-position: 0 0; 
    background-repeat:  no-repeat; 

    width:    120px; 
    height:    60px; 

    display:   block; 
    text-indent:  -9999px; 

    transition:   opacity 0.3s ease-in-out; 
    -moz-transition: opacity 0.3s ease-in-out; 
    -webkit-transition: opacity 0.3s ease-in-out; 
    -o-transition:  opacity 0.3s ease-in-out; 
} 
#button a:hover, 
#button a:focus{ 
    opacity:   0; 
} 


</style> 
</head> 
<body> 
<div id="button"><a href="#"></a></div> 
</html>

출처

2013-04-09 11:11:04 CBuzatu

사용 :

div{ 
    width: 120px; 
    height: 60px; 

    background-image: url('sprite.jpg'); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    transition: background-position 1s ease; 

}

그리고 옵션으로 공급 업체 접두사를 잊지 마세요

편집 :

난 당신이 퇴색 필요로 나타났습니다. 이 같은 유사한 솔루션을 시도 : 나는 모바일에서 메신저 '사촌이 시도 할 수

div{ 
    background: url(foo.jpg) no-repeat 0 0 transparent; 
    transition: background: 1s ease; 
} 

div:hover{ 
    background: rgba(0, 0, 0, 1); 
}

출처

2013-04-09 10:51:09

그러면 bg 이미지가 adn에서 사라지지 않고 슬라이드됩니다. – Kyle

이것은 스프라이트 이미지의 위치간에 페이드되지 않습니다. – CBuzatu

'div'는 투명하며 흰색 페이지가 표시되고 마우스를 올리면 검은 색으로 변합니다 .... 나는 당신이 시도한 것을 이해하지 못합니다. – CBuzatu

그래서 기본적으로, 당신은

CSS3 전환이 경우 도움이되지 않습니다 :hover

background-position 변화
fadein 효과에 따라 두 가지를 수행해야합니다. CSS3 애니메이션 속성을 사용할 수 있습니다.

애니메이션 속성은 애니메이션 및 기간이 name입니다. 쉼표로 구분하여 여러 개의 애니메이션 이름을 제공 할 수 있습니다.

이 애니메이션 이름을 정의해야합니다. 원하는 모든 문자열이 될 수 있지만 정의해야합니다.
```
div:hover{ 
    animation: fadein 10s, bp 0.5s; 
    -moz-animation: fadein 10s, bp 0.5s; /* Firefox */ 
    -webkit-animation: fadein 10s, bp 0.5s; /* Safari and Chrome */ 
    -o-animation: fadein 10s, bp 0.5s; 
    background-position:0 0; 
} 
@-webkit-keyframes fadein { /* Safari and Chrome */ 
    from { 
     opacity:0; 
    } 
    to { 
     opacity:1; 
    } 
} 
@-webkit-keyframes bp { /* Safari and Chrome */ 
    from { 
     background-position:-200px 0; 
    } 
    to { 
     background-position:0 0; 
    } 
} 
```
이 완료 브라우저,이 fiddle를 참조 애니메이션

주 지원 : 그래서이 CSS를 고려 그것은 확실히 IE < 9에서 작동하지 않습니다! 그것은 IE9 (확실하지 않음)에있을 수 있습니다.

출처

2013-04-09 10:55:42

이것은 스프라이트의 배경 위치 사이의 페이드가 아닌 슬라이드입니다 – CBuzatu

@CBuzatu 지금 내 대답을보십시오! –

당신은 @keyframes

div:hover{ 
    animation: logo 2s 0 linear; 
} 
@keyframes logo{ 
    0% { opacity: 1; } 
    5% { opacity: 0; } 
    50% { background-position: 0 -60px; opacity: 0; } 
    100% { background-position: 0 -60px; opacity: 1; } 
}

예와 CSS3 Animation를 사용할 수 있습니다 물론 http://jsfiddle.net/Y8W9S/

, 지금 당신은 당신이 구현하고자하는 시간과 효과를 조정해야합니다.

희망 사항은 도움이되거나 올바른 방향으로 안내해주기를 바랍니다.

행운을 빈다.

출처

2013-04-09 11:18:59 gmo

CSS3 - 스프라이트 이미지의 'background-position'사이를 흐리게 처리합니다.

답변

관련 문제