0
페이지로드를 줄이기 위해 스프라이트를 사용하려고 생각했습니다. 내 문제는 배경으로 이미지가 li이고 그 사이에 다른 이미지가 있다는 것입니다.
스프라이트로 모든 이미지를로드하고 싶습니다. 그러나 클래스를 li의 배경으로 사용할 수 있습니까? 스프라이트로 2 또는 고름 이미지를로드하는 경우 모든 이미지가 포함 된 단일 이미지가 있고 CSS로 어떤 디스플레이를 선택할 수 있습니다. 예를 들면 다음 중 하나입니다. http://i.stack.imgur.com/THgwl.png이 4 개의 이미지 중 어떤 이미지를 표시할지 선택할 수 있습니다.
li으로 이와 같은 작업을 수행 할 수 있습니까?
CSS 스프라이트로 배경 이미지로드
<li class="icon advice chrome">content</li>
.icon {
background:url(http://i.stack.imgur.com/THgwl.png);
}
.advice {
height:100%;
width:100%;
}
.chrome {
background-position:-0px -0px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.firefox {
background-position:-0px -80px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.facebook {
background-position:-0px -160px;
width:70px;
height:70px;
background-repeat:no-repeat;
}
.twitter {
background-position:-0px -240px;
width:70px;
height:70px;
background-repeat:no-repeat;
}<a href="http://www.google.com/chrome" target="_blank"><img src="http://i.stack.imgur.com/HKyLm.gif" border="0" width="1" height="1" class="icon advice chrome" title="Google Chrome" alt="Chrome" /></a>
\t <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank"><img src="http://i.stack.imgur.com/HKyLm.gif" border="0" width="1" height="1" class="icon advice firefox" title="Firefox" alt="Firefox" /></a><br />
\t <a href="https://www.facebook.com/" target="_blank"><img src="http://i.stack.imgur.com/HKyLm.gif" border="0" width="1" height="1" class="icon advice facebook" title="" alt="Facebook"/></a>
\t <a href="https://twitter.com/" target="_blank"><img src="http://i.stack.imgur.com/HKyLm.gif" width="1" height="1" border="0" class="icon advice twitter" title="" alt="Twitter"/></a>
실행 해 보셨습니까? 그게 내게 일하는 것 같아 .. – Jmh2013